【问题标题】:Knockout not rendering淘汰赛不渲染
【发布时间】:2014-08-14 12:01:38
【问题描述】:

场景:

我有一个ViewModel,其中包含Grades 的列表。我需要让 Knockout 来呈现这些成绩,只要名字就可以了。

电流输出:

ViewModel 正在捕获数据。我之所以知道这一点,是因为我的代码中有一系列 console.log() 语句确实返回了我期望它返回的内容。

预期输出:

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

链接:

小提琴: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>

任何反馈和/或 cmets 总是受到欢迎和赞赏。

【问题讨论】:

    标签: javascript knockout.js


    【解决方案1】:

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

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

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

    【讨论】:

    • 谢谢,刚刚想通了......感觉就像一个印章。
    猜你喜欢
    • 2019-10-31
    • 2016-10-08
    • 2017-04-12
    • 2012-05-01
    • 1970-01-01
    • 2016-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多