数据绑定与敲除JS

Question

我遇到一个问题，无法绑定我的数据，然后使用cshtml显示它。我尝试过使用可观察数组的不同方法，我在想，我的主要问题来自于试图利用我所谓的“有界数据”......以下是我的cshtml（c＃-html）代码，然后是我的js代码。

<!--*****Unfinished*****--> 
        <td> 
         <label class="element-label">Continuous (Vibratory) Acceleration</label> 
         <select class="form-control device-family-selector" , data-bind="options: changeAuxFlange.availableVForces, optionsText: 'forceName', value: changeAuxFlange.selectedForces, optionCaption: 'Choose a force...'"></select> 
        </td> 
        <td> 
         <input style="width:50px; text-align:right;" , data-bind="text: changeAuxFlange.selectedForces" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label class="element-label">Maximum (Shock) Acceleration</label> 
         <select class="form-control device-family-selector" , data-bind="options: changeAuxFlange.availableSForces, optionsText: 'forceName', value: changeAuxFlange.selectedForces, optionCaption: 'Choose a force...'"></select> 
        </td> 
        <td> 
         <input style="width:50px; text-align:right;" , data-bind="value: changeAuxFlange.selectedForces" /> 
        </td> 
        <!--**********--> 

视图模型：

"use strict"; 
function ViewModel() 
{ 
    // it would make more sense with the current setup to make the ViewModel be the Application, but I have set it up like this in case some day it is desired that this tool creates multiple applications in one session 
    this.application = ko.observable(new Application('New Application', this)); 
    this.requestSearchMode = ko.observable(false); 
} 

function Application(name, parentViewModel) 
{.... 
this.sections = 
    { 
     gForceSection: initGforceSection(this), 
     pumpSection: initPumpSection(this), 
     calcLoadsSection: initCalcLoadsSection(this) 
    }.... 
} 

    function initGforceSection(application) 
{ 
    var data = ko.observableArray(); 

    var gForceSection = new Section('G-Forces', data, application); 


    var self = this; 
    var Force = function (name, value) { 
     this.forceName = name; 
     this.forceValue = value; 
    }; 
    var vibForce = { 
     availableVForces: ko.observableArray([ 
      { vForce: "Skid steer loader", value: 4 }, 
      { vForce: "Trencher (rubber tires)", value: 3 }, 
      { vForce: "Asphalt paver", value: 2 }, 
      { vForce: "Windrower", value: 2 }, 
      { vForce: "Aerial lift", value: 1.5 }, 
      { vForce: "Turf care vehicle", value: 1.5 }, 
      { vForce: "Vibratory roller", value: 6 } 
     ]), 
     selectedForces: ko.observable() 
    }; 
    var shockForce = { 
     availableSForces: ko.observableArray([ 
      { sForce: "Skid steer loader", value: 10 }, 
      { sForce: "Trencher (rubber tires)", value: 8 }, 
      { sForce: "Asphalt paver", value: 6 }, 
      { sForce: "Windrower", value: 5 }, 
      { sForce: "Aerial lift", value: 4 }, 
      { sForce: "Turf care vehicle", value: 4 }, 
      { sForce: "Vibratory roller", value: 10 } 
     ]), 
     selectedForces: ko.observable() 
    }; 


    gForceSection.families = ko.observableArray(); 
    productData.getPumpFamilies(function (data) { 
     gForceSection.families(data); 
     addPump(application); 
    }); 

    gForceSection.tbxNumberofPumps = ko.computed(function() { return gForceSection.data().length }); 

    return gForceSection; 
} 
//CREATE VIEWMODEL 
var viewModel = new ViewModel; 

ko.applyBindings(viewModel); 
/******/ 

Answer 1

的的ViewModels是一系列嵌套对象的这使得引用相当复杂。我可以看到你试图在逻辑上构造数据，但是它很难提供帮助。 Knockout有一个context用于绑定，它以绑定视图模型开始。您可以使用with绑定来更改元素/节的上下文。

否则，您必须为Knockout提供完整路径，例如data-bind="value: app.gforcesection.someitem.someProperty - 如果路径中的项目未定义，则这可能会导致错误。

我已经删除了大量的结构，使之成为工作样本，试图帮助： http://jsfiddle.net/Quango/3y9qhnv9/

新的视图模型现在是直接与所有它性能的“平坦”的对象。我不确定为什么你将输入框绑定到这个部队，所以我修改了这些绑定到每一个的值属性。希望这能帮助你朝正确的方向发展。