使用knockout.js将数组绑定到视图模型

binding an array to a view model using knockout.js

本文关键字：视图 模型 绑定 数组 knockout js 使用      更新时间：2023-09-26

有没有一种方法可以定义数组并将其绑定到视图模型？还是必须将其定义为对象？：

----js----

var arr=[｛"id"："1"，"desc"："2"，"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>

如果您不想将数组包装在对象中，那么您可以使用特殊的上下文变量$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

我使用MVC而不是"arr"，所以我使用Model（我留下了我将使用的版本为"arr），并在视图的顶部有一个@using IEnumerable<MyViewModel>，我让控制器做一些类似的事情：

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/

相关文章：