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

有没有办法定义数组并将其绑定到视图模型？还是必须将其定义为对象

----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******”}]； $（文档）.ready（函数（）{ ko.应用绑定（arr）； }); -----html----

---

如果不想在对象中包装数组，则可以使用特殊上下文变量

$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>

您可以在这里找到有关上下文变量的更多信息：

我使用MVC，而不是“arr”，因此我使用

模型（我留下了我将使用的“arr”版本），在视图顶部有一个
@using IEnumerable
，我让控制器执行如下操作：

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>


身份证件
描述
启用
塔布斯特
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]；
$（函数（）{
var myViewModel=新的myViewModel（arr）；
应用绑定（myViewModel）；
函数MyViewModel（arr）{
var self=这个；
self.mainArray=ko.observableArray（[]）；
如果（arr.length>0）{
对于（var i=0；i
，除非您的数据有更多内容，
$root
和
$data
在该顶层对您来说应该是相同的。听起来您已经开始工作了。
public ActionResult Index() {
     var data = myDataContext.SomeTable.Where(e => e.blah == "Foo"); 
     return View(data);
}

<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>