Question

我遇到的问题是无法绑定我的数据然后使用cshtml显示它。我尝试了不同的制作可观察数组的方法，我想，我的主要问题来自于试图利用我所谓的＆＃34;有界数据＆＃34; ...以下是我的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，以绑定的viewmodel开头。您可以使用with绑定更改元素/部分的上下文。

否则你必须给Knockout一个完整的路径，例如data-bind="value: app.gforcesection.someitem.someProperty - 如果路径中的项目未定义，则可能导致错误。

我删除了很多结构，使其成为一个可以帮助的工作示例： http://jsfiddle.net/Quango/3y9qhnv9/

新的viewModel现在是一个“扁平”对象，其上直接包含所有属性。我不确定为什么你将输入框绑定到力，所以我修改了那些以绑定到每个的value属性。希望这能帮助你朝着正确的方向前进。

使用Knockout JS进行数据绑定

1 个答案: