Question

我在视图模型中有一个带有数组的observable对象，我希望用不同的项目item1，item2填充它，每个项目都有自己的设置。所以我试图找出设置它的最佳方法。

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

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

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

请查看我的 Fiddle

我确实收缩了我的Item1，但请记住我有10个以上的变量。

另外我知道Item1和Item2的设置方式不同，我只是测试了最好的方法，知道我有10个以上的vars对象。

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
    }
}

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

Answer 2

您可以通过以下几种方式改善这一点：

使用Knockout的按钮单击绑定
使用可观察的布尔值创建custom binding handler来控制模态可见性（每个模态都有自己的变量，它们都使用相同的绑定类型）
将您的物品作为自己的物品;没有带有item2等前缀的变量
不要让resetVariables之类的东西必须找出你正在使用的项目类型，让项目知道如何重置自己

Knockoutjs和设置视图模型

2 个答案: