Вычислительные наблюдаемые с раскрытием шаблона прототипа в нокауте JS

Question

У меня есть проект, который использует раскрывающий шаблон модуля и прототипирование. Это было отлично для того, чтобы помочь мне управлять большим количеством Javascript-кода с помощью Knockout JS. Это было прямо для стандартных наблюдений и действий и т. Д. Однако, когда я пришел к созданию вычисленного наблюдаемого, я не могу заставить его работать.

Я прочитал эту статью: Difference between knockout View Models declared as object literals vs functions

который, кажется, точно описать, что я хочу, как я использую литерал объекта. Однако я не могу правильно его реализовать.

Вот HTML:

<div data-bind="with: MyForm"> 
    <p>First Name: <span data-bind="text: formValues.FirstName"></span></p> 
    <p>Last Name: <span data-bind="text: formValues.LastName"></span></p> 
    <p>Full Name: <span data-bind="text: formValues.FullName"></span></p> 
</div> 

Вот Javascript:

window.Test = window.Test || {}; 

Test.Main = function() { 
    this.viewModel = {}; 
    this.setupViewModel(); 

    return { 
     viewModel: this.viewModel 

    }; 
}; 
Test.Main.prototype.setupViewModel = function() { 
    var viewModel = function() { 
     var vm = this; 

     this.MyForm = { 
      formValues: { 
       FirstName: ko.observable("Joe"), 
       LastName: ko.observable("Bloggs") 
      } 
     } 
    }; 

    /* 
    viewModel.MyForm.formValues.FullName = ko.computed(function() { 
     return this.FirstName() + " " + this.LastName(); 
    }, vieModel.MyForm.formValues); 
    */ 
    this.viewModel = new viewModel(); 
    ko.applyBindings(this.viewModel); 

    return this; 
} 

var mainApplication = new Test.Main(); 

Я создал простой JsFiddle ниже, чтобы проиллюстрировать этот код: http://jsfiddle.net/dontbesorry80/2Ltb790z/

Я закомментирована то, что я думал, будет решением, поскольку оно не работает. Любая помощь в настройке этого jsFiddle для работы (правильно отобразить полное имя) была бы весьма признательна.

Answer 1

Этот фрагмент кода работает.

Test.Main.prototype.setupViewModel = function() { 
    var viewModel = function() { 
     var vm = this; 

     this.MyForm = { 
      formValues: { 
       FirstName: ko.observable("Joe"), 
       LastName: ko.observable("Bloggs") 
      } 
     } 
    }; 

    this.viewModel = new viewModel(); 

    this.viewModel.MyForm.formValues.FullName = ko.computed(function() { 
     return this.FirstName() + " " + this.LastName(); 
    }, this.viewModel.MyForm.formValues); 

    ko.applyBindings(this.viewModel); 

    return this; 
} 

Вместо прикрепления FullName свойство функции конструктора вы должны создать ViewModel, а затем прикрепить вычисляемый переменную к нему.

Использование это имеет решающее значение для получения надлежащей области видимости внутри вычисленной функции.

В упоминаемой SO ответа вы можете точно такое же сценарий:

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

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

Первого - ViewModel создается с первыми & последними свойствами, а затем - свойство полным добавляются в объект ViewModel.

Надеюсь, это поможет.