使用多个模型访问Knockoutjs中的部分数据

时间:2015-02-24 16:42:12

标签: javascript knockout.js

我只想了解为什么Knockout.js不允许我访问部分模型数据。是因为我将模型绑定到包含所有子模型的div(本例中为Form),或者我认为它错了?

例如,在这个jsfiddle http://jsfiddle.net/zv6hauft/1/

我想保存票价信息,但遗漏了公交信息。即使我只是通过" fare_lines"在示例中,它向我显示了控制台中的所有模型。

<!doctype html>
<script src="/javascript/knockout-3.3.0.js"></script>
<form id="transport_form" method="post">
    <table class="table table-condensed required" data-bind='visible: bus_lines().length > 0'>
        <thead>
            <tr>
                <th>Bus</th>
            </tr>
        </thead>
        <tbody data-bind='foreach: bus_lines'>
            <tr>
                <td>
                    <input name="bus_date" type="text" class="bus_date" value=" " data-bind='value: bus_desc' required/>
                </td>
                <td><a href='#' id="bus_remove" data-bind='click: $parent.removeBusLine'>Delete</a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="controls">
        <button id="bus_button" data-bind='click: addBusLine'>Add Bus</button>
    </div>
    <div id="fare_info_table">
        <table data-bind='visible: fare_lines().length > 0'>
            <thead>
                <tr>
                    <th>Fare</th>
                </tr>
            </thead>
            <tbody class="table required" data-bind='foreach: fare_lines'>
                <tr>
                    <td>
                        <input id="fare_amnt" data-bind='value: fare_desc' required />
                    </td>
                    <td><a href='#' id="fare_remove" data-bind='click:$parent.remove_fare_line'>Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="controls">
            <button id="fare_button" data-bind='click: add_fare_line'>Add fare</button>
        </div>
    </div>
    </br>
    </br>
    <div class="control-group">
        <div class="controls">
            <button type='submit' data-bind="click: save_record">Submit</button>
        </div>
    </div>
</form>

</html>



<script>


//Bus Model
var Bus_model = function () {
    var self = this;
    self.bus_desc = ko.observable();
};



var fare_model = function () {
    var self = this;
    self.fare_desc = ko.observable();
}

var operations_bus_fare = function () {

    var self = this;

    //Study Schedule Operations
    self.bus_lines = ko.observableArray([new Bus_model()]);
    self.addBusLine = function () {
        self.bus_lines.push(new Bus_model())
    };
    self.removeBusLine = function (Bus_line) {
        self.bus_lines.remove(Bus_line)
    };

    //Fare operations
    self.fare_lines = ko.observableArray([new fare_model()]);
    self.add_fare_line = function () {
        self.fare_lines.push(new fare_model())
    };
    self.remove_fare_line = function (fare_line) {
        self.fare_lines.remove(fare_line)
    };




    self.save_record = function (fare_lines) {
        var saveData2 = ko.toJSON(fare_lines);
        console.log(saveData2);
        alert(saveData2);
    };
};

ko.applyBindings(new operations_bus_fare(), document.getElementById("transport_form"));

</script>

1 个答案:

答案 0 :(得分:1)

您可以像我这样访问ViewModel的一部分

<强>视图模型:

self.save_record = function (data) { // we get entire vm here as param
    var saveData2 = ko.toJSON(data.fare_lines); // access required part 
    console.log(saveData2);
    alert(saveData2);
};

工作小提琴 here