首頁(yè) 猿問(wèn) 被聲明為對(duì)象文本與函數(shù)的剔除視圖模...

被聲明為對(duì)象文本與函數(shù)的剔除視圖模型的區(qū)別

JavaScript

縹緲止盈 2019-07-08 15:35:28

被聲明為對(duì)象文本與函數(shù)的剔除視圖模型的區(qū)別在淘汰js中，我看到視圖模型聲明為：var viewModel = { firstname: ko.observable("Bob")};ko.applyBindings(viewModel );或：var viewModel = function() { this.firstname= ko.observable("Bob");};ko.applyBindings(new viewModel ());這兩者有什么區(qū)別，如果有的話？我確實(shí)找到了這次討論關(guān)于淘汰賽，谷歌集團(tuán)，但它并沒(méi)有給我一個(gè)滿意的答案。如果我想用一些數(shù)據(jù)初始化模型，我可以看到一個(gè)原因，例如：var viewModel = function(person) { this.firstname= ko.observable(person.firstname);};var person = ... ;ko.applyBindings(new viewModel(person));但如果我不這么做，我選擇哪種風(fēng)格有關(guān)系嗎？

查看完整描述

3 回答

喵喔喔

TA貢獻(xiàn)1735條經(jīng)驗(yàn) 獲得超5個(gè)贊

使用函數(shù)定義視圖模型有幾個(gè)優(yōu)點(diǎn)。

的主要優(yōu)點(diǎn)是您可以立即訪問(wèn)this它等于正在創(chuàng)建的實(shí)例。這意味著你可以：

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

因此，計(jì)算的可觀測(cè)值可以綁定到this，即使從不同的范圍調(diào)用。

對(duì)于對(duì)象文本，您必須執(zhí)行以下操作：

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

在這種情況下，你可以用viewModel直接在計(jì)算的可觀測(cè)值中，但它確實(shí)是立即計(jì)算的(默認(rèn)情況下)，因此不能在對(duì)象文本中定義它，如viewModel直到對(duì)象文字關(guān)閉后才定義。許多人不喜歡將視圖模型的創(chuàng)建封裝在一個(gè)調(diào)用中。

另一種模式，您可以使用它來(lái)確保this總是適當(dāng)?shù)模褪窃诤瘮?shù)中設(shè)置一個(gè)等于this用它代替。這就像：

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

現(xiàn)在，如果您在單個(gè)項(xiàng)的范圍內(nèi)并調(diào)用$root.removeItem的價(jià)值this實(shí)際上是在該級(jí)別上綁定的數(shù)據(jù)(這將是項(xiàng))。通過(guò)在本例中使用Self，可以確保將其從整個(gè)視圖模型中刪除。

另一個(gè)選項(xiàng)是使用bind，它由現(xiàn)代瀏覽器支持，如果不支持KO，則由KO添加。在這種情況下，看起來(lái)應(yīng)該是：

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

在這個(gè)主題上可以說(shuō)更多的話，也可以探索許多模式(比如模塊模式和揭示模塊模式)，但基本上使用一個(gè)函數(shù)可以讓您更靈活地控制對(duì)象的創(chuàng)建方式和引用實(shí)例私有變量的能力。

反對(duì) 回復(fù) 2019-07-08

慕少森

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊

我使用了一種不同的方法，盡管類似：

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

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

原因如下：