數據綁定與敲除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/

新的視圖模型現在是直接與所有它性能的「平坦」的對象。我不確定爲什麼你將輸入框綁定到這個部隊，所以我修改了這些綁定到每一個的值屬性。希望這能幫助你朝正確的方向發展。