1

我试图使用敲除创建一种电子表格的公式操作，但敲除不起作用。

我的数据来自外部 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/

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

4

2 回答 2

2

更常见的做法是将数据复制到视图模型上的可观察属性中，然后将它们绑定到 html 元素。您正在 js 中创建 html，而不是在前端使用敲除（如果您有多个结果要为其创建行，则使用 foreach）。同样，当您绑定它们时，您可以使用您的数据对象直接在 html 中设置值。猜测一下，绑定是在您在 html 中设置值之后执行的，并且由于所有可观察值都设置为零，这将覆盖您直接在 html 中设置的值。

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

于 2013-03-15T11:53:01.020 回答
0

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

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

于 2013-03-15T12:00:12.790 回答