0

私は比較的単純な Web アプリケーションに取り組んでおり、スーパーバイザーは、Knockout、MVC、および Bootstrap を組み合わせて使用​​することを勧めました。残念ながら、おそらくプロジェクトの些細な部分で行き詰まってしまいました。

私は多くの Knockoutチュートリアルを見てきましたが、最も単純なものを模倣しようとしてきました。

残念ながら、私のデータバインディングはどれも機能していないようです。オブザーバブルは割り当てられた値を決して保持しません。

私も検索中にこのスレッドに出くわし、それを模倣しようとしましたが、役に立ちませんでした. 基本的に、Visual Studio MVC4 で Knockout データ バインディングを適切に実装する方法を知りたいだけです。これが私の HTML コードです。その多くは、上記のスレッドから切り取ったものです。

@model FluidBedSimulation.Models.BedState
@using Newtonsoft.Json

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@if (false)
{
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.2.0.js" type="text/javascript"></script>

}
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>



<script type="text/javascript">

    this.BedMass = ko.observable(1);
    this.BedWaterMass = ko.observable(1);
    this.binderFraction = ko.observable(1);

    (function () {
        var model = '@Html.Raw(Json.Encode(Model))';
           var viewModel = ko.mapping.fromJS(model);
           ko.applyBindings(viewModel);

       });

</script>




@*grab values from the view model directly*@

<p>Bed Weight: <strong data-bind="text: BedMass" id="BedMass"></strong></p>
<p>H2O Bed Weight: <strong data-bind="text: BedWaterMass" id="BedWaterMass"></strong></p>
<p>Fraction of Binder in Spray Solution: <strong data-bind="text: binderFraction" id="binderFraction"></strong></p>

<p>
    Enter the Bed Mass: 
            <input data-bind="value: BedMass" />

            @*Html.TextBoxFor(model => model.BedMass, new { data_bind = "value: BedMass" })*@
</p>
<p>
    Enter the H2O Mass in the Bed: 
            @Html.TextBoxFor(model => model.BedWaterMass, new { data_bind = "value: BedWaterMass" })
</p>
<p>
    Enter the Fraction of Binder in the Spray Solution: 
            @Html.TextBoxFor(model => model.binderFraction, new { data_bind = "value: binderFraction" })
</p>

<button data-bind="click: Simulate">Simulate</button>

これが私が持っている単純なモデルです...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace FluidBedSimulation.Models
{
    public class BedState
    {
        public double BedMass { get; set; }
        public double BedWaterMass { get; set; }
        public int binderFraction { get; set; }
        public double EvapRate { get; set; }
        public double SprayRate { get; set; }
        public double AirTemp { get; set; }
        public double AirFlow { get; set; }
    }
}

そしてシンプルなコントローラー。派手なものはありません。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FluidBedSimulation.Models;
using Newtonsoft.Json;


namespace FluidBedSimulation.Controllers
{
    public class SimulationController : Controller
    {
        //
        // GET: /Simulation/

        public ActionResult Index()
        {


            BedState state = new BedState
            {
                BedMass = 0,
                BedWaterMass = 0,
                binderFraction = 0,
                AirFlow = 0,
                AirTemp = 0,
                EvapRate = 0,
                SprayRate = 0
            };

            FluidBed bed = new FluidBed
            {
                FluidBedStates = new List<BedState> { state }
            };


            return View(state);
        }

    }
}

皆さんが私にこのことを始めさせていただければ、本当に感謝しています。そうでなければ、古き良き JQuery と html に固執する必要があるかもしれません。前もって感謝します！

4

2 に答える 2

0

あなたは knockout.mapping プラグインを使用していますが、マッピング プラグインの js ファイルが含まれているとは思いません。ノックアウト lib ファイルの後に含める必要があります: https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output。

また、匿名関数が実行されることはありません。すぐに呼び出されるようにするには、次のように括弧で終了する必要があります。

(function () {
    var model = '@Html.Raw(Json.Encode(Model))';
       var viewModel = ko.mapping.fromJS(model);
       ko.applyBindings(viewModel);

})();
于 2013-06-18T19:59:41.400 に答える