Knockoutjs 和设置视图模型

Question

我的视图模型中有一个带有数组的observable 对象，我想用不同的项目（item1、item2）填充它，每个项目都有自己的设置。所以我想找出最好的方法来设置它。

我当前的设置很糟糕，还有一些我无法弄清楚我做错了什么的错误。

例如，我创建了一个 item1，然后保存，然后我尝试创建另一个 item1，当弹出窗口时，输入字段填充了我创建的第一个 item1 的值，我不知道为什么，因为保存后我重置了变量。

我只是想知道我这样做是否正确，我该怎么做才能使它变得更好。

请看我的Fiddle

我确实缩小了我的 Item1，但请记住我有 10 多个变量。

我也知道 Item1 和 Item2 的设置不同，我只是在测试解决此问题的最佳方法，因为我知道我有 10 多个变量的对象。

Answer 1

小改变就可以解决问题。将item1Setup 设为可观察的相当简单的 JavaScript 变量，它不会对更改做出反应，例如self.item1Setup=ko.observable()

视图模型：

var myViewModel = function() {
    var itemData = ko.observable({
        "data": []
    });
    var self=this;
    self.item1Setup = ko.observable(); //declare it here

    //Create Item1 Popup
    self.item1Setup(new item1("", 0, "")); // assign instance to observable

    function createItem1() {
        self.item1Setup().item1Id(getNewId()); // assign value to observable content
        itemData().data.push(self.item1Setup());
        shouldShowPopup(false, "Item1");
        //reset back to defaults
        resetVariables("Item1");
    }

    function resetVariables(resetType) {
        switch (resetType) {
            case "Item1":
                self.item1Setup(new item1("", 0, "")); //you can reset as it is observable UI takes it changes
                break;
            default:
        }
    }

    return {
        itemData: itemData,
        item2Id: item2Id,
        item2Title: item2Title,  
        item2Location: item2Location,
        item1Setup: self.item1Setup, //return observable 
        addItem2: addItem2,
        createItem1: createItem1,
        editItem1: editItem1,
        getItem1FromList: getItem1FromList,
        resetVariables: resetVariables
    }
}

我发现了一些代码来解释关键问题检查工作小提琴 here 的 createitem1 。

Answer 2

有几种方法可以让这变得更好：

1. 为您的按钮使用 Knockout 的点击绑定
2. 创建custom binding handler 以使用可观察的布尔值控制模态可见性（每个模态都有自己的变量，它们都使用相同的绑定类型）
3. 让您的物品成为自己的物品；没有以 item2 等为前缀的变量。
4. 不要让resetVariables 之类的东西必须弄清楚您正在使用的项目类型，让项目知道如何重置自己