Связывание данных с нокаутом 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 представляет собой серию вложенных объектов, что делает ссылки довольно сложным. Я вижу, что вы пытаетесь логически структурировать данные, но это затрудняет помощь. Нокаут имеет context для привязки, который начинается с привязанной модели. Вы можете изменить контекст для элемента/раздела, используя привязку with.

В противном случае вы должны дать нокауту полный путь, например. data-bind="value: app.gforcesection.someitem.someProperty - это может быть причиной ошибок, если элемент в пути не определен.

Я удалил много структуры, чтобы сделать его рабочий образец, чтобы попытаться помочь: http://jsfiddle.net/Quango/3y9qhnv9/

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