3

配列を定義してビューモデルにバインドする方法はありますか？または、オブジェクトとして定義する必要がありますか？：

---- js ----

var arr = [{"id"： "1"、 "desc"： "1"、 "enabled"：true、 "tabStr"： "/ 2 * * * * * *"}、
            {"id"： "2"、 "desc"： "2"、 "enabled"：true、 "tabStr"： "1-60 / 2 * * * * * *"}、
            {"id"： "3"、 "desc"： "3"、 "enabled"：false、 "tabStr"： "/ 5 * * * * * *"}];

$（document）.ready（function（）{
  ko.applyBindings（arr）;
}）;

----- html ----

    <tbody data-bind="foreach: ???">
      <tr>
        <td data-bind="text: id"></td>
        <td data-bind="text: desc"></td>
        <td data-bind="text: tabStr"></td>
        <td data-bind="text: enabled"></td>
      </tr> 
    </tbody>
4

2 に答える 2

2

配列をオブジェクトにラップしたくない場合は、特別なコンテキスト変数を使用して$data(または$rootこれが最上位のビュー モデルであるため)、現在のデータに対してバインドできます。したがって、バインディングは次のようになります。

<tbody data-bind="foreach: $data">
  <tr>
    <td data-bind="text: id"></td>
    <td data-bind="text: desc"></td>
    <td data-bind="text: tabStr"></td>
    <td data-bind="text: enabled"></td>
  </tr> 
</tbody>

コンテキスト変数の詳細については、http: //knockoutjs.com/documentation/binding-context.htmlを参照してください。

于 2012-09-08T14:50:31.160 に答える
0

「arr」の代わりに、MVC を使用するのでModel(「arr」として使用するバージョンを残しました)、@using IEnumerable<MyViewModel>ビューの上部に a があり、次のようなコントローラーがあります。

public ActionResult Index() {
     var data = myDataContext.SomeTable.Where(e => e.blah == "Foo"); 
     return View(data);
}

そして、これはあなたのようなものを返すarrので、以下の私のコードはうまくいくはずです:

<table border="1" width="100%" data-bind="foreach: mainArray">
    <tr>
        <td width="25%">ID</td>
        <td width="25%">Desc</td>
        <td width="25%">Enabled</td>
        <td width="25%">TabStr</td>
    </tr>
    <tr>
        <td width="25%" data-bind="text: id"></td>
        <td width="25%" data-bind="text: desc"></td>
        <td width="25%" data-bind="text: tabStr"></td>
        <td width="25%" data-bind="text: enabled"></td>
    </tr> 
</table>
<script language="type/Javascript">
    var arr = [{"id":"1","desc":"1","enabled":true,"tabStr":"2"},
        {"id":"2","desc":"2","enabled":true,"tabStr":"1-60"},
        {"id":"3","desc":"3","enabled":false,"tabStr":"5"}];
    //var arr = [@Html.Raw(Json.Encode(Model))][0];

    $(function () {

         var myViewModel = new MyViewModel(arr);
         ko.applyBindings(myViewModel);

         function MyViewModel(arr) {
             var self = this;
             self.mainArray = ko.observableArray([]);

             if (arr.length > 0) {
                 for (var i=0; i<arr.length; i++) {
                     var myDataViewModel = new MyDataViewModel(arr[i]);
                     self.mainArray.push(myDataViewModel);
                 } 
             }
         }

         function MyDataViewModel(vm) {
            //alert(vm.id);
            var self = this;
            if (vm != null) {                     
               self.id = ko.observable(vm.id);
               self.desc = ko.observable(vm.desc);
               self.enabled = ko.observable(vm.enabled);
               self.tabStr = ko.observable(vm.tabStr);
           } else {
              self.id = 0;
              self.desc = 0;
              self.enabled = true;
              self.tabStr = 0;
           }
        }
     });

</script>

JSFiddle の作業はこちら: http://jsfiddle.net/navyjax2/y75hcr2L/

于 2015-02-14T06:03:03.577 に答える