差異聲明爲對象文本VS功能

Question

在淘汰賽JS我看到聲明視圖模型爲兩種：

var viewModel = { 
    firstname: ko.observable("Bob") 
}; 

ko.applyBindings(viewModel); 

或：

var viewModel = function() { 
    this.firstname= ko.observable("Bob"); 
}; 

ko.applyBindings(new viewModel()); 

什麼是兩者之間的區別，如果有的話？

我確實在knockoutjs google group上找到了this discussion，但它並沒有給我一個滿意的答案。

我明白了一個道理，如果我想用一些數據來初始化模式，例如：

var viewModel = function(person) { 
    this.firstname= ko.observable(person.firstname); 
}; 

var person = ... ; 
ko.applyBindings(new viewModel(person)); 

但是如果我不這樣做，不要緊，我選擇哪一種風格？

Answer 1

使用函數來定義視圖模型有兩個好處。

主要優點是您可以立即訪問值爲this的值，該值等於正在創建的實例。這意味着，你可以這樣做：

var ViewModel = function(first, last) { 
    this.first = ko.observable(first); 
    this.last = ko.observable(last); 
    this.full = ko.computed(function() { 
    return this.first() + " " + this.last(); 
    }, this); 
}; 

所以，你的計算觀察到的可以綁定到的this適當的價值，即使從不同範圍調用。

一個對象文本，你必須做的：

var viewModel = { 
    first: ko.observable("Bob"), 
    last: ko.observable("Smith"), 
}; 

viewModel.full = ko.computed(function() { 
    return this.first() + " " + this.last(); 
}, viewModel); 

在這種情況下，你可以在計算觀察到的直接使用viewModel，但它得到的評價立即（默認），所以你不能在對象文字中定義它，因爲viewModel直到對象文字關閉後才定義。許多人不喜歡你的視圖模型的創建沒有被封裝到一個調用中。

您可以用來確保this總是合適的另一種模式是在函數中設置一個等於適當值this的變量，然後使用它。這將是這樣的：

var ViewModel = function() { 
    var self = this; 
    this.items = ko.observableArray(); 
    this.removeItem = function(item) { 
     self.items.remove(item); 
    } 
}; 

現在，如果你是在一個單獨的項目的範圍和呼叫$root.removeItem的this值實際上將數據在這一水平的限制（這將是該項目）。通過在這種情況下使用self，您可以確保將其從整體視圖模型中移除。

另一種選擇是使用bind，如果不受支持，則由現代瀏覽器支持並由KO添加。在這種情況下，它看起來像：

var ViewModel = function() { 
    this.items = ko.observableArray(); 
    this.removeItem = function(item) { 
     this.items.remove(item); 
    }.bind(this); 
}; 

還有很多，可以在這個題目，很多模式，你可以探索（如模塊模式和揭示模塊模式）可以說，但基本上使用函數給出您可以更靈活地控制對象的創建方式以及引用實例專用變量的能力。

Answer 2

我使用不同的方法，儘管相似的：

var viewModel = (function() { 
    var obj = {}; 
    obj.myVariable = ko.observable(); 
    obj.myComputed = ko.computed(function() { return "hello" + obj.myVariable() }); 

    ko.applyBindings(obj); 
    return obj; 
})(); 

幾個原因：

1. 不使用this，其可以混亂內ko.computed用於當s等
2. 我的視圖模型是一個singleton，我不需要創建多個實例（即new viewModel()）