Question

我有一个简单的列表视图，在Knockout的帮助下显示项目。一套＆＃39; Things ＆＃39;硬编码成一个数组，Knockout在页面加载时列出它们。它到目前为止工作正常。

现在，我想添加一个新函数：newFunc（）。将在具有属性的函数中创建一个新项目，但没有名称。如果用户愿意，可以稍后将该项目添加到列表中。然后，用户可以为该项目指定名称。

问：在这种情况下，我怎么能（或者我可以）使用构造函数＆＃39; Item ＆＃39;在新功能中创建新项目？＆＃39; 项目＆＃39;函数需要参数＆＃39; item＆＃39;，但在新函数中，我无法传递参数，因为正在创建新项目并且未给出名称。为了实现所描述的功能，我应该如何思考和编码？

任何帮助和提示都将不胜感激。

// HTML //

<ul data-bind='foreach: itemList'>
    <li data-bind='text: name'></li>
</ul>

//脚本//

var Things = [
    { name: 'name1', property: 'prop1' },
    { name: 'name2', property: 'prop2' },
    ...
];

var Item = function(item) {
    this.name = item.name;
    this.property = item.property;
};

// The new function in Question
var aNewItem;
newFunc = function() {
    // I'd like to create an 'Item' with a given property, but w/o a name.
    aNewItem = new Item(); // ???
    aNewItem.property = 'propertyN'; // **Edit**: also a variable set by user or callback.
};

var viewModel = function {
    self = this;
    self.itemList = ko.observableArray();
    Things.forEach(function(item) {
        self.itemList.push(new Item(item));
    });
};

ko.applyBindings(new viewModel());

Answer 1

您可以传递一个只有property属性的对象。

aNewItem = new Item({
  property: 'propertyN'
});

Answer 2

您有几种选择（按我采用的最佳做法顺序）：

使用构造函数中的默认选项

您可以通过在赋值中使用||（或）运算符来指定构造函数属性的默认选项（= {如果||之前的值为falsy，则在之后赋值）。如果您有一个对象作为参数（这是最简单的），您可以将项目重新分配给空对象（如果未传递），这样可以更轻松地测试其属性。

var Item = function(item) {
    var item = item || {};
    this.name = item.name || '';
    this.property = item.property || 'propertyN';
};

使用调用者中的默认选项（newFunc）

虽然我认为如前所示拥有默认值更简洁，但也可以在调用构造函数的函数中指定它们：

newFunc = function() {
    aNewItem = new Item({property: 'propertyN'});
};

或者如果你在构造函数中指定了默认值，那么你的函数在当前状态下也能正常工作。

仅添加项目参数

指定的属性

您还可以选择添加带有for..in循环的项目中的所有属性。免责声明：我不建议这样做，因为它使得构造函数毫无意义。

var Item = function(item) {
    var item = item || {};
    for (var prop in item) 
      this[prop] = item[prop];
};

然后你可以这样做：

newFunc = function() {
    aNewItem = new Item({property: 'propertyN', foo: 'foo'});
    bNewItem = new Item(); 
    console.log(aNewItem.foo); // 'foo'
    console.log(bNewItem['whatever']); // undefined
};

在函数

2 个答案:

使用构造函数中的默认选项

使用调用者中的默认选项（newFunc）

仅添加项目参数