试图从可观察的数组中获取特定元素

Question

我试图从一个可观察的阵列中获取具体的值。 在这个例子中，我试图获得我在数组中创建的两个值的数量。

我已经设置了这样的代码：

HTML

<div id="test" style="width: 100%">
    <table style=" width: 50%; display: block; float: left; margin: 0; padding: 0; border: none">
        <tr>
            <td>Item 1</td>
            <td><span data-bind="text: someArray()[0].number"></span></td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td><span data-bind="text: someArray()[1].number"></span></td>
        </tr>
        </table>
</div>

JavaScript的

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
    var viewModel = {
        someArray: ko.observableArray([]) //
    }

    ko.applyBindings(viewModel);

    $(function () {
        getData();
    });

    var getData = function () {
        viewModel.someArray([
            { 
                number: 123,
                text: "abc"
            },
            { 
                number: 456,
                text: "def",
            }
        ]);
    }
</script>

我也把它上传到了JSfiddle 。

如何访问阵列中的特定位置？

Answer 1

以下作品：

var viewModel = {
  someArray: ko.observableArray([]) //
}


var getData = function () {
  viewModel.someArray.push(
    {number: 123,text: "abc"},
    {number: 456,text: "def"},
    {number: 789,text: "ghi"}
  );
}

getData();
ko.applyBindings(viewModel);

您正在将数组推送到viewModel.someArray而不是3个单独的对象。 您还必须在插入数组对象后应用绑定，否则当someArray中没有行时，您将获得无法解析绑定异常。

您可以考虑使用foreach绑定来更好地满足您的需求Knockout Foreach绑定 。 然后你可以随时调用applyBindings。 如果你要在数组中有你不想要的其他行，可以从你想要的索引中创建一个计算的可观察数组，并围绕它建立一个foreach绑定。

Answer 2

你的小提琴不起作用有几个原因，最重要的是你试图使用JQuery，但它没有加载到页面中。

这是修改后的javascript：

var viewModel = {
    someArray: ko.observableArray([]) //
}


var getData = function () {
    viewModel.someArray.push(
        { 
            number: 123,
            text: "abc"
        });
    viewModel.someArray.push(
        { 
            number: 456,
            text: "def",
        });
    viewModel.someArray.push(
        { 
            number: 789,
            text: "ghi",
        });

}

getData();
ko.applyBindings(viewModel);