标签: ko.observablearray

我的observableArray视图模型中有一个.创建vm后我希望完全替换数据observableArray.我是这样做的:

//Initial Setup
var vm = {};
vm.roles = ko.observableArray([]);
ko.applyBindings(vm); 


//....replace array later on....
vm.roles(["1", "2"]);

这似乎工作正常,但我担心这是不正确的,可能会导致内存泄漏.如果这是更新现有的首选方式,observableArray假设您希望替换其所有数据,那么任何人都可以遵守吗？

我注意到observableArray确实有一个removeAll()方法,并想知道是否需要调用它来干净地完成这项工作,或者我是否对我正在做的事情很好？

我想知道如何创建一个计算的可观察数组.

在我的视图模型中,我有2个可观察数组,我希望有一个计算的可观察数组,它只是两个数组的组合.

function ViewModel() {
    var self = this;
    self.listA= ko.observableArray([]);
    self.listB = ko.observableArray([]);
    self.masterList= //combine both list A and B

我正在尝试observableArray用新内容替换项目中的所有内容.

var oldLocation = ko.utils.arrayFirst(self.locations(), function (item) {
    return item.id == value.id;
});
self.locations.replace(self.locations.indexOf(oldLocation), new location(value));
self.locations.valueHasMutated();

我也试过了

self.locations[self.locations.indexOf(location)] = new fizi.ko.models.location(value);

但没有任何工作.正在检索索引,但项目的更新没有发生.

我想显示一个可编辑的项目列表,每个项目都是可编辑的(在某种程度上类似于可编辑的网格).我正在使用KnockoutJS.我不能只使用一个简单的Observable Array,因为文档声明"一个observableArray跟踪数组中的哪些对象,而不是那些对象的状态"

因此,我创建了一个observableArray的可观察对象(使用utils.arrayMap),并将它们绑定到视图.但问题是,如果我在屏幕上编辑数据,则用户在屏幕上进行的任何数据输入更改似乎都不会生效.见http://jsfiddle.net/AndyThomas/E7xPM/

我究竟做错了什么？

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js" type="text/javascript"></script>

<table>
   <tbody data-bind="template: { name:'productListJavascriptTemplate', foreach: products}">
   </tbody>
</table>


<script type="text/html" id="productListJavascriptTemplate">
<tr>
    <td>Name: <input data-bind="value: Name"/></td>
    <td>Name: <span data-bind="text: Name"/></td>
    <td><select data-bind="options: this.viewModel.categories, 
        optionsText: 'Name', optionsValue: 'Id', value: CategoryId,
        optionsCaption: 'Please select...'"></select></td>
    <td>CategoryId: <input data-bind="value: CategoryId"/></td>

</tr>

</script>?

var categoryList= [
{
   Name: "Electronics",
   Id: "1"},
{
   Name: "Groceries",
   Id: "2"}
];

var initialData= [
{
   Name: "Television",
   CategoryId: "1"},
{
   Name: "Melon",
   CategoryId: "2"}
];

var viewModel = {
    products: …

我在组合foreach绑定时遇到了麻烦.我有一个列表绑定如下:

<article data-bind="foreach: widgets">  

小部件是一个简单的可观察数组:

var widgets= ko.observableArray();

这很好地给了我一个我的"小部件"列表.如果我将新的"小部件"添加到此列表中,则它将通过数据绑定动态显示在列表中.

但是,只要我向数组添加排序:

<article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() < right.order() ? -1 : 1); })">

然后新添加的小部件不再出现在我的列表中 - 除非我重新加载页面.(此时排序很有效 - 如果我更新了我正在排序的"order"字段,那么列表中的项目将被动态重新排序).

如何通过动态更新我的可观察数组中的新项目来进行排序？

我正在使用Breezejs来检索我的数据,但我不认为这会影响这种情况.

我有以下代码:

// First we define our gift class, which has 2 properties:
// a Title and a Price.
// We use knockout js validation to ensure that the values input are suitable/ 
function Gift(item)
{
    var self = this;
    self.Title = ko.observable(item.Title);

    // attach some validation to the Title property courtesy of knockout js validation
    self.Title.extend({
        required: true,
        minLength: 3,
        pattern: {
            message: 'At least ',
            params: '^[a-zA-Z]+\s?[a-zA-Z]*'
        }
    });
    self.Price = ko.observable(item.Price);
    self.Price.extend({required:true,number:true,min:0.1,max:1000});
};


var viewModelForTemplated =
{
    gifts: …

在customerOverview视图模型中调用任何observable的长度时,我会收到零长度.随着绑定随数据更新,可观察数据中存在数据,但长度保持为0.基本视图模型'CustomerCentral'正确返回长度.我需要'CustomerOverview'中一些observable的长度来做一些条件语句.

HTML绑定

<ul class="nav nav-list">
      <li class="nav-header">Contacts</li>
      <!--ko  if: customerOverview.contacts().length == 0-->
      <li>No contacts associated with this customer</li>
       <!-- /ko -->
      <!--ko  foreach: customerOverview.contacts()-->
      <li>
      <a data-bind="click: $root.customerOverview.viewContact"><i class="icon-chevron-                        right single pull-right">
       </i><span data-bind="text: FirstName"></span><span data-bind="text: LastName"></span>
      </a></li>
      <!-- /ko -->
</ul>

JS

function CustomerOverview() {
        var self = this;        

        self.contacts = ko.observableArray([]);           

        self.getCustomerContacts = function () {
            requestController = "/CRM/CustomerCentral/CustomerContacts";
            queryString = "?id=" + self.customer().Id();
            $.ajax({
                cache: false,
                type: "GET",
                dataType: "json",
                url: baseURL + requestController + queryString,
                headers: …

所以我有一个可观察的阵列工作正常,但UI不会更新.我看过很多人遇到这个问题类型,但我没有看到它.

所以HTML是

            <tbody data-bind="foreach: tweets">
            <tr>
                <td>
                    <span data-bind="visible: created_at" class="label label-success">Yup</span>
                </td>
                <td><p><b data-bind="text: screen_name"></b></p></td>
                <td><p><b data-bind="text: id"></b></p></td>
                <td><p data-bind="text: text"></p></td>
                <td><p data-bind="text: created_at"></p></td>
            </tr>
            </tbody>

Javascript是一个调用API并从中构建数组的函数.

<script type="text/javascript">
        function TweetsViewModel() {
            var self = this;
            self.tasksURI = 'http://localhost:8000/api/v1/tweet/';
            self.tweets = ko.observableArray();

            self.ajax = function(uri, method, data) {
                var request = {
                    url: uri,
                    type: method,
                    contentType: "application/json",
                    Accept: "application/json",
                    cache: false,
                    dataType: 'json',
                    data: JSON.stringify(data)
                };
                return $.ajax(request);
            }

            self.ajax(self.tasksURI, 'GET').done(function(data) {
                for (var i = 0; i …

在TypeScript类中初始化Knockout observableArray的正确方法是什么？

我正在做这样的事情:

   module ViewModel { 

        declare var ko;

        export class IndexPageViewModel {       

                agencies: any;                   

                constructor () {               
                    this.agencies = ko.observableArray([]);              
                }                                                                                                   
        }
    }


var ivm = new ViewModel.IndexPageViewModel();
ivm.agencies.push({name: "name", alias : "alias"});
for (var i = 0; i < ivm.agencies.length; i++){
    alert(ivm.agencies[i].name);
 }

看起来很简单,但当我尝试按指示访问代理商属性时,执行挂起.我错过了什么？

我正在尝试从knockout.js observableArray对象中提取唯一属性,以填充下拉菜单.作为淘汰赛的新手,我真的很挣扎!

我想迭代一个联系人列表,并使用observableArray中每个person对象的唯一值填充一个drop菜单.所以在我下面的代码示例中,我希望在我的下拉菜单中填入一个人类'类型'列表 - 家人,朋友等.

在Google上看,我发现了一个类似的功能,但是它没有返回任何值,即使我在console.log结果中也是如此？

//dummy data more rows in actual code...

var people = [
    { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
    { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }
];


function ContactsViewModel(people) {

    var self = this;
    self.contacts = ko.observableArray(people);

    self.uniqueSelect = ko.dependentObservable(function() {
        return( ko.utils.arrayGetDistinctValues(self.contacts().type).sort());
    }, self);
};

ko.applyBindings(new …