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

时间:2014-01-21 17:15:51

标签: javascript knockout.js

我试图从一个observablearray中获取特定值。在这个例子中,我试图获得我在数组中创建的两个值的数量。

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

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

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

2 个答案:

答案 0 :(得分:2)

以下作品:

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 Binding。然后你可以随时调用applyBindings。如果你要在数组中有你不想要的其他行,可以从你想要的索引中创建一个computed observable数组,并围绕它建立一个foreach绑定。

答案 1 :(得分:1)

你的小提琴不起作用有几个原因,最大的问题是你正在尝试使用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);