javascript - knockout 不渲染

标签 javascript knockout.js

场景:

我有一个ViewModel其列表为 Grades在里面。我需要 Knockout 来渲染这些成绩,只要名称就可以了。

当前输出:

数据正在由 ViewModel 捕获。我知道这一点是因为一系列console.log()我的代码中的语句确实返回了我期望的结果。

预期输出:

只是一系列<p>标签中包含年级名称。

链接:

fiddle : Here

PasteBin:Here

当前代码:

<html>
<head>
    <title></title>
    <?php 
        include "./includes/functions.php";
    ?>

    <script type="text/javascript" src="js/vendor/ko.js"></script>
    <script type="text/javascript" src="js/vendor/ko-mapping.js"></script>

    <script type="text/javascript">
        function load() {

            var parsedJSON = <?php echo json_encode(populateGrades()) ?>;
            console.log(parsedJSON);

            function Grade (id, name, springPressure) {
                this.id = ko.observable(id);
                this.name = ko.observable(name);
                this.springPressure = ko.observable(springPressure);
            }

            function ViewModel() {
                var self = this;

                self.grades = ko.utils.arrayMap(parsedJSON, function(item) {
                    return new Grade(item.id, item.name, item.springPressure);
                });

                console.log(self.grades);

                self.chosenGrade = ko.observable();

                self.json = ko.toJSON(self.grades);
            }

            ko.applyBindings(new ViewModel());

        }
    </script>


</head>
<body onload="load()">
    <!--  ko foreach: grades -->
        <p data-bind="name"></p>
    <!--  /ko -->
</body>
</html>

我们始终欢迎并赞赏任何反馈和/或评论。

最佳答案

这是一个非常简单的拼写错误:字段名称错误:

self.grades = ko.utils.arrayMap(parsedJSON, function (item) {
    return new Grade(item.GradeID, item.Name, item.SpringPressure);
});

工作示例:http://jsfiddle.net/CZLn4/2/

关于javascript - knockout 不渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24382998/

相关文章:

对象内部的 Javascript 原型(prototype)方法

javascript - 从 knockoutJS 中的 observableArray 中删除自身

javascript - 从未定义的 knockout 值调用 ajax 函数

javascript - Google map API 圆圈图标

javascript - 将一个对象添加到另一个对象的末尾

javascript - 在 foreach 循环中使用 $root 值设置 href

javascript - 多个数组的数据绑定(bind) : {foreach: . ..}

javascript - 卡住标题不允许点击 knockout

javascript - Jquery - 如何在 html 元素之间来回转换 (fadeIn/fadeOut) 并保持位置?

javascript - 如何使用 c3.js 自定义 donut 厚度?