个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 10:42:45 24 4
gpt4 key购买 nike

我只是想了解为什么 Knockout.js 不允许我访问部分模型数据。是因为我将模型绑定(bind)到包含所有子模型的 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>

最佳答案

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

View 模型:

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);
};

工作 fiddle here

关于javascript - 使用多个模型访问 Knockoutjs 中的部分数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28701374/

24 4 0
文章推荐： javascript - AngularJS redirectTo 没有找到正确的路径
文章推荐： javascript - 理解 modal.js 中未定义的方法
文章推荐： javascript - 选择 Kendo UI 网格行来填充选择菜单？
文章推荐： javascript - 网页什么发送和接收
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com