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 に答える