标签: ko.observablearray

小提琴可以在这里找到.

我正在添加一个由它映射的可观察数组ko.mapping.fromJS().

在我看来,我正在使用数组上的属性构建一个URL attr: { href: '/Users/Summary?userId=' + ID() }.

如果我想在我正在使用的数组中添加一个项目self.Users.push().

如果我这样做,我会收到错误ID is not a function.

所以我的问题是将数据添加到数组的正确方法,还是我没有href正确构建attr？

我使用KnockoutJS从数组填充列表:

<div data-bind:"foreach: list">
   <input type="text" data-bind="value: myText" />
</div>

function ViewModel() {
    self.list = ko.observableArray([
        new listItem("sample text")
    ]);
};

function listItem (text) {
    this.myText = text;
};

我可以像这样为我输入的各个实例分配一个id

<input data-bind="attr: { id: $index } ...

如何从listItem函数中访问此索引？我希望能够做类似的事情

function listItem (text) {
    this.myText = text;
    this.index = $index;
};

为了进一步处理使用它.

我正在使用一个可观察的"部件"数组,其中包含一个可观察到的"Vol".我目前有每个部分的音量以及显示的总量.应用程序启动时,正确添加总金额.但是,当我更改零件的体积时,总量不会重新计算.

HTML:

<ul>
    <li data-bind="foreach:  Parts">
        <input data-bind="value: Vol" />
<br/>
    </li>
</ul>

<br/>
<br/>
<span data-bind="text: fullVol "></span>

使用Javascript:

    function Part (data) {

       var self = this;
        self.Vol= ko.observable(data.Vol);

    }


    function AppViewModel() {
       var self = this;


        self.Parts = ko.observableArray([new Part({"Vol": 1}), new Part({"Vol":2}), new Part({"Vol":3})]);
        self.fullVol = ko.computed(function() {
            var total = 0;
           $.each(self.Parts(), function() { total += (this.Vol() ) })
            return total;
        });
    }


ko.applyBindings(new AppViewModel());

这是我的JsFiddle:http://jsfiddle.net/jwinstonaspen/Zmkew/6/

我正在学习Knockout,并且有一个pdfs可观察的数组,其中包含4个项目.我需要项目的HTML输出如下所示:

Intro Text
[Item 1].name is located in [Item 1].location

Some links, other body text
[Item 2].name is located in [Item 2].location
[Item 3].name is located in [Item 3].location
[Item 4].name is located in [Item 4].location

我找到了一些参考的地方,data-bind="text: pdfs[nth].name"但如果我这样做,我得到'pdf未定义'或类似.我意识到我可以使用两个foreach循环,<!-- ko if: $index() == nth -->但肯定还有更好的方法吗？

这似乎是一些人想要做的事情,所以我希望这是一个强有力的解决方案.我意识到我在谈论这里的第一个项目(其他一切都可以在其中循环foreach),但我对整体感兴趣nth(如果我想说,第3项特别的地方).

*如果可能的话,我真的不想创建自定义绑定

我将其放入 html tbody data-bind="foreach: contact"
和 Knockout 视图模型中

var viewModel = function () {
    $this = this;
    $this.contacts = ko.observableArray();

$this.nextPage = function () {

        $.ajax({
            url: "/api/AddressBook",
            data: { pagesize: pageSize, currentpage: CPage },
            type: "GET"
        }).done(function (data) {

            var myKoObservableArray = $this.contacts; 

            myKoObservableArray.push(null);
            myKoObservableArray.push(data);

           alert(data[0].Name);

        });
}

$(document).ready(function () {
    $.ajax({
        url: "/api/AddressBook",
        data: { pagesize: 10,currentpage: 0 },
        type: "GET"
    }).done(function (data) {

        var vm = new viewModel();
        vm.contacts(data);
        ko.applyBindings(vm);
    });
});

第一次加载页面时，表格是通过 $(document).ready 的 ajax 调用填充的。当我从 …

在完成了使用列表和集合的淘汰教程之后,我决定进一步使用knockout实现两级嵌套.

我的ViewModel的结构如下所示:

function ViewModel() {
    this.elements = ko.observableArray([{
        id: 1,
        txt: 'first',
        el: ko.observableArray(['first', 'second'])
    },{
        id: 2,
        txt: 'second',
        el: ko.observableArray(['first', 'third'])
    },{
        id: 3,
        txt: 'third',
        el: ko.observableArray(['fourth', 'fifth'])
    }]);

    this.remove = function(el){
        console.log(el);
    }
}

所以这就像可观察数组中的Observable数组.我正在输出一个简单的2 foreach视图绑定:

<div data-bind="foreach: elements">
    <span data-bind="text: txt"></span>
    <ul data-bind="foreach: el">
        <li data-bind="text: $data, click: $root.remove">
    </ul>
</div>

问题在于删除语句(完整代码在小提琴中).到目前为止,我没有删除元素.函数只给出了我想要删除的元素的值,first这不足以唯一地标识我需要删除的内容(这是第一个数组中的第一个数据还是第二个数组).

那么有没有办法从observableArray中的observableArray中正确删除元素？

我有这样的事情：

var ScheduleDay = function(day, times) {
    var self = this;
    self.day = ko.observable(day || "");
    self.times = ko.observableArray(times || []);
};

function viewModel() {
    var self = this;
    self.schedule = ko.observableArray([
        new ScheduleDay("Monday"),
        new ScheduleDay("Tuesday"),
        new ScheduleDay("Wednesday"),
        new ScheduleDay("Thursday"),
        new ScheduleDay("Friday"),
        new ScheduleDay("Saturday"),
        new ScheduleDay("Sunday")
    ])
}

ko.applyBindings(new viewModel());

<input id="mondaySchedule" type="checkbox" data-bind="checked ???">

我为一周中的每一天设置了 3 个复选框：上午、下午和晚上。我想要一个类似于：时间表：{星期一：[“早上”，“下午”]，星期二：[“下午”]等}

我试图使用knockout observable array在网页中显示大约5000条记录,这需要花费很多时间,

有没有办法处理这个没有分页？

请帮忙..

视图模型中的JS代码,数据来自gridData源中的ajax调用:

 groupGrid.prototype.updateGrid = function (gridDataSource, groupGridOptions) {
        var self = this;
        self.ColumnName(groupGridOption.ColumnNameList); //   List of column name available in the data source.
        self.gridData(gridDataSource);    //  taking time while executing this code  
        self.totalRowCount(self.gridData().length);
        self.selectedItems.removeAll();
        self.selectedRowCount(0);
    };

HTML代码:

<tbody class="ngTBody" data-bind="foreach: gridData">
<tr class="ngdatarow">
<td>
    <span class="nameHeader" data-bind="text: $data[$root.ColumnName()[0]], click: $root.gridNameClick" style="cursor: pointer; text-decoration: underline"></span>
</td>
<td>
    <span class="displayBlock" data-bind="text: $data[$root.ColumnName()[1]]"></span>
</td>
<td>
    <span class="displayBlock" data-bind="text: $data[$root.ColumnName()[3]"></span>
</td>
</tr>
</tbody>