3

私は初心者のknockout.jsです。また、私はasp.net mvc 3の上位中間体です。mvc3かみそりでノックアウトjsを使用する方法を本当に学びたいですか？しかし、以下のコードは機能していません。また、空の合計金額を私に返します。エラーはありません。助けてくださいありがとう...

モデル：


  public class GiftModel
    {
        public string Title { get; set; }
        public double Price { get; set; }
    }

意見：


@using System.Web.Script.Serialization;
@model IEnumerable<knockout1.Models.GiftModel>
@{
    ViewBag.Title = "Index";
}

<script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var initialData = @(new JavaScriptSerializer().Serialize(Model));
    var viewModel = {
    gifts : ko.observableArray(initialData)
};

ko.applyBindings(viewModel);
</script>
<h2>Index</h2>

<p>You have asked for <span data-bind="text: gifts().length"> </span> gift(s)</p>

コントローラ：


   public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            var initialState = new[] {
                                     new GiftModel { Title = "Tall Hat", Price = 49.95 },
                                     new GiftModel { Title = "Long Cloak", Price = 78.25 }
                                    };
            return View(initialState);
        }

    }
4

1 に答える 1

15

あなたはこのチュートリアルに従っていると思います。

いくつかのエラーがあります。最初の交換：

var initialData = @(new JavaScriptSerializer().Serialize(Model));

と：

var initialData = @Html.Raw(Json.Encode(Model));

これにより、モデルが適切にJSONエンコードされていることが保証されます。元の記事では、Steven SandersonがWebFormsビューエンジンを使用していますが、Razorビューエンジンを使用しているようです。@したがって、それに応じて構文を調整するようにしてください（かみそり関数は、<%=WebForms構文とは逆に出力を自動的にhtmlエンコードすることを忘れないでください）。

また、コードの2番目の問題は、DOMの準備が整う前にノックアウトモデルをバインドしようとしたことです（つまりko.applyBindings(viewModel);、バインドを含む実際のスパンの前に呼び出しを行った）。したがって、呼び出しをaでラップするか、タグ$(document).readyを閉じる直前のドキュメントの最後にスクリプトを配置します（推奨）。</body>

また、URLヘルパーを使用してスクリプトを参照することをお勧めします。これらのURLをハードコーディングするだけでなく、IISで公開するとすぐにアプリケーションが壊れます。

@model IEnumerable<GiftModel>

<h2>Index</h2>

<p>You have asked for <span data-bind="text: gifts().length"> </span> gift(s)</p>

<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/javascript">
    var initialData = @Html.Raw(Json.Encode(Model));
    var viewModel = {
        gifts : ko.observableArray(initialData)
    };

    ko.applyBindings(viewModel);
</script>

ご覧のとおり、2つの問題は、厳密にはとは関係ありませんknockoutjs。したがって、フレームワークを学びたい場合は、それを個別に学ぶことをお勧めします。テクノロジーを混同しないでください。混同しないでください。

したがって、knockoutjsサイトに進んで、静的HTMLページで作業するチュートリアルを開始してください。今のところASP.NETMVCについては忘れてください。EntityFrameworkを忘れてください。静的なHTMLページからフレームワークを学ぶだけです。このようにして、それがどのように機能するかをよりよく理解できます。

于 2012-10-01T18:34:46.610 に答える