将ViewModel传递给可重用的Knockout控件

Question

我有一个可重新使用的控件/自定义绑定&模板，该模板旨在基于一组传入的配置选项和最终绑定到页面的ViewModel来构建动态向导。我已经准备好了向导，并且显示了所有必填字段，但到目前为止，我还没有能够显示实际的输入字段值。

任何想法？

视图模型

var user = function() { 
      var self = this; 
      self.FirstName = ko.observable("Brent"); 
      self.LastName = ko.observable("Pabst"); 
      self.Email = ko.observable("me@brentpabst.com"); 
      self.FullName = ko.computed(function() { 
       return self.FirstName() + " " + self.LastName(); 
      }); 
     }; 

     var tenant = function() { 
      var self = this; 

      self.Name = ko.observable("Tenant Name"); 
      self.SubDomain = ko.observable("Sub Domain"); 
      self.User = ko.observableArray([new user]); 

      self.wizardModel = new merlin.wizard({ 
       title: "Add a Tenant", 
       model: self, 
       steps: [ 
        { Title: "Tenant Information", 
         Fields: [ 
          { Name: "Name", Label: "Organization Name", Value: "Name" }, 
          { Name: "SubDomain", Label: "Login Page", Value: "SubDomain" } 
         ] 
        }, 
        { Title: "Administrator Information", 
         Fields: [ 
          { Name: "FirstName", Label: "First Name", Value: "User.FirstName" }, 
          { Name: "LastName", Label: "Last Name", Value: "User.LastName" }, 
          { Name: "Email", Label: "E-Mail Address", Value: "User.Email" } 
         ] 
        } 
       ] 
      }); 

      self.save = function() { 
       alert(ko.toJSON(self)); 
      }; 
     }; 

     ko.applyBindings(tenant()); 

向导模式

merlin.wizard = function (config) { 
    var self = this; 
    self.steps = config.steps; 
    self.title = config.title; 
    self.model = config.model; 
    self.currentStep = ko.observable(0); 
}; 

模板&绑定

var templateEngine = new ko.nativeTemplateEngine(); 

templateEngine.addTemplate = function (templateName, templateMarkup) { 
    document.write("<script type=\"text/html\" id='" + templateName + "'>" + templateMarkup + "<" + "/script>"); 
}; 

templateEngine.addTemplate("merlin_wizard", "\ 
    <form class=\"m-ui-wizard\">\ 
     <h1 data-bind=\"text: title\" />\ 
     <h2 data-bind=\"text: title\" />\ 
     <div class=\"m-ui-wizard-steps\" data-bind=\"foreach: steps\">\ 
      <div class=\"m-ui-wizard-step\">\ 
       <!-- ko if: $data.Fields -->\ 
        <!-- ko foreach: Fields -->\ 
         <label data-bind=\"text: Label, attr: { for: Name }\"></label>\ 
         <input type=\"text\" data-bind=\"attr: { name: Name }, Value: typeof value === 'function' ? Value($root.model) : $root.model[Value]\" />\ 
        <!-- /ko -->\ 
       <!-- /ko -->\ 
      </div>\ 
     </div>\ 
    </form>"); 

ko.bindingHandlers.wizard = { 
    init: function() { 
     return { controlsDescendantBindings: true }; 
    }, 
    update: function (element, viewModelAccessor, allBindingsAccessor) { 
     var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor(); 

     while (element.firstChild) 
      ko.removeNode(element.firstChild); 

     var wizTemplateName = allBindings.gridTemplate || "merlin_wizard"; 

     var wizContainer = element.appendChild(document.createElement("DIV")); 
     ko.renderTemplate(wizTemplateName, viewModel, { templateEngine: templateEngine }, wizContainer, "replaceNode"); 
    } 
}; 

HTML摘录

<div data-bind="wizard: wizardModel"></div> 

注：我一直无法得到这个在小提琴在所有的工作，不知道为什么不是事实，我可能会推小提琴的界限在此设置其它。

Answer 1

<input>的值绑定字符串不正确。它应该更像：

value: typeof Value === 'function' ? Value($root.model) : $root.model[Value] 

这里的a fiddle