Question

我试图使用knockout创建一个电子表格式的公式操作，但是淘汰不起作用。

我的数据来自外部Json文件

Json文件

{
    "info": [
        {
            "Name":"Noob Here",
            "Major":"Language",
            "Sex":"Male",
        "English":"15",
        "Japanese":"5",
        "Calculus":"0",
        "Geometry":"20" 
        }
    ]
}

代码

<script type="text/javascript">
    function loadData(fileName) {
        // getting json from a remote file
        // by returning the jqXHR object we can use the .done() function on it
        // so the callback gets executed as soon as the request returns successfully
        var data = $.getJSON(fileName + ".json");
        return (data);

    }

    function fillDataTable(data) {
        // iterate over each entry in the data.info array
        $.each(data.info, function(index, element) {
            // append it to the table 
            $("#div1").append("<tr><td>" + element.Name + "</td><td>" + element.Major + "</td><td>" + element.Sex + "</td><td>" + "<input data-bind='value: eng' value=" + element.English + "></td><td>" + "<input data-bind='value: jap' value=" + element.Japanese + "></td><td>" + "<input data-bind='value: cal' value=" + element.Calculus + "></td><td>" + "<input data-bind='value: geo' value=" + element.Geometry + "></td><td>" + "<strong data-bind='text: total'></td>")
        });
    }

    $(document).ready(function() {

        // the file's name. "Data" in this example.
        var myFile = "Data2";

        loadData(myFile).done(function(data) {
            // check if we acutally get something back and if the data has the info property
            if (data && data.info) {
                // now fill the data table with our data
                fillDataTable(data)
            }
        });

        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {
            this.eng = ko.observable("0");
            this.jap = ko.observable("0");
            this.cal = ko.observable("0");
            this.geo = ko.observable("0");

            this.total = ko.computed(function() {
                var tot = parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo());
                return (tot);
            }, this);

        }

        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    });
</script>

我的HTMl

<table cellspacing="1" id="div1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我从json文件中获取数据。但是淘汰赛没有用。

代码：http://jsfiddle.net/KGKpw/

注意：我添加小提琴只是为了整齐地显示代码。

Answer 1

将数据复制到视图模型上的可观察属性中更常见，然后将这些属性绑定到html元素。您正在使用js创建html，而不是在前端使用knockout（如果您有多个结果来创建行，则使用foreach）。此外，当您绑定它们时，您将使用数据对象直接在html中设置值。猜测，绑定是在之后在中设置了html中的值，并且因为所有的observable都设置为零，这将覆盖你直接在HTML

尝试将html移动到视图中，而不是在视图模型中，将数据从js对象复制到视图模型，然后仅使用knockout绑定将视图链接到视图模型。

Answer 2

您需要在html中使用data-bind将viewmodel绑定到视图。

更新了你的小提琴： http://jsfiddle.net/KGKpw/1/

Knockout无法正常工作：来自外部Json文件的值

2 个答案: