Question

是否可以创建一个ko.observable数组并使用数组对象填充它？

我的目标是创建一个ko.observable数组，其中包含与原始数组相同的所有描述/对象。

//Sample data the original data is coming from an socket query and being push on the array("people")
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"
  }
];.

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"
  }
];

var quotesarray = function(items) {
  this.items = ko.observableArray(items);
  this.itemToAdd = ko.observable("");
  this.addItem = function() {
    if (this.itemToAdd() != "") {
      this.items.push(this.itemToAdd());
      this.itemToAdd("");
    }
  }.bind(this);
};
ko.applyBindings(new quotesarray(people));

console.log(people);

Answer 1

您只需要使其成为items而不是quotesarray

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" }
];


var quotesarray = function(items){
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function(){
        if (this.itemToAdd() != ""){
            this.items.push(this.itemToAdd());
            this.itemToAdd("");
        }
    }.bind(this);
};
ko.applyBindings(new quotesarray(people));

console.log(people);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
    <thead>
        <tr><th>name</th><th>address</th></tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: address"></td>
        </tr>
    </tbody>
</table>

Answer 2

您可以创建一个observableArray套接字向其写入消息。您subscribe进入数组，以便在内容更改时（即套接字每次写入之后）自动得到通知。

在subscribe回调中，清空数组并将项目添加到viewmodel的属性中。

如果您希望收到许多快速成功的消息，则可以rateLimit写入数组，以确保不要将DOM更新太多次。

这是一个例子。解释在代码注释中。

const UPDATE_EVERY_MS = 500;

// The observable array the socket writes to
const received = ko.observableArray([])
  // Use a rateLimit extension if you expect to
  // receive many updates from your socket
  .extend({ rateLimit: UPDATE_EVERY_MS });
  
// The observable array in your viewmodel
const rendered = ko.observableArray([]);

received.subscribe(items => {
  // Write "inbox" to viewmodel's list
  rendered(rendered().concat(items));
  
  // Clear received without triggering notification
  items.length = 0;
});

ko.applyBindings({ items: rendered });


// Mock a socket that writes to `received`
setInterval(() => received.push(Math.random()), 200);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: rendered">
  <li data-bind="text: $data"></li>
</ul>

创建新的KO.observable数组并从数组对象中填充它

2 个答案: