Question

我有一个控制器。我在其中定义数据并将其设置为模型。后来我想将这个模型的数据绑定到视图中的List控件。 问题：但问题是数据没有显示在我绑定它的相应控件中。任何人都可以帮助我做错了吗？

这是我的控制器代码和我的观点：

App.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.examples.controller.App" height="100%">
<Page title="List Page">
    <content>
        <List headerText="{/question}" id="myList" items="{ path: '/answers' }">
            <items>
                <InputListItem label="{answerText}">
                    <CheckBox></CheckBox>
                </InputListItem>
         </List>
        <Button press="load" text="Click Me"></Button>
    </content>
</Page></mvc:View>

App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"], function(Controller, JSONModel) {

var oData = {
    "question": "Which pet do you like from the following?",
    "answers": [{
        "answerText": "Cats"
    }, {
        "answerText": "Rabbits"
    }, {
        "answerText": "Dogs"
    }, {
        "answerText": "Hamsters"
    }]
};

var oModel;


Controller.extend("opensap.examples.controller.App", {

    onInit: function() {
         oModel = new JSONModel();
         oModel.setData(oData);
         console.log(oModel);
    }, load: function() {
        console.log(oModel);
    }
}); });

Answer 1

事实上，我们需要乘法模型，我们正在为模型指定名称。您将获得更高的一致性和更好的可读性，并且您可以完全控制您的应用程序。如果以这种方式绑定模型，则必须使用元素绑定（请参阅：https://sapui5.netweaver.ondemand.com/1.34.7/docs/guide/91f05e8b6f4d1014b6dd926db0e91070.html）。

还有一件事：你忘记了＆＃39;，＆＃39;从load中分离onInit;）我为你修复了以下代码。

最后一件事：D如果在函数中声明一个变量，由于范围的变化，你无法访问另一个函数（参见：What is the scope of variables in JavaScript?）你需要在一个函数中访问你的模型全球范围！您可以将模型绑定到this，也可以通过引用名称

访问模型

loki现在想要动态显示答案（见本文下面的评论）。要实现此目的，您需要使用聚合绑定（请参阅：https://sapui5.hana.ondemand.com/#docs/guide/91f057786f4d1014b6dd926db0e91070.html）。 Aggregation Binding让你循环播放＃34;通过你的JS-Object（JSON）。您可能会在<List> - 元素：）

中看到差异

App.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.examples.controller.App" height="100%">
<Page title="List Page">
    <content>
        <List headerText="{myModel>/question}" items="{myModel>/answers}">
            <items >
                <InputListItem label="{myModel>answerText}"> <!-- Aggregation Binding -->
                    <CheckBox></CheckBox>
                </InputListItem>
         </List>
        <Button press="load" text="Click Me"></Button>
    </content>
</Page>
</mvc:View>

App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"], function(Controller, JSONModel) {

var oData = {
    "question": "Which pet do you like from the following?",
    "answers": [
          {"answerText": "Cats"}, 
          {"answerText": "Rabbits"},
          {"answerText": "Dogs"},
          {"answerText": "Hamsters"}
     ]
 };

// edit
var oModel; // <-- might work, but it is not a good practice @sapui5 :)


Controller.extend("opensap.examples.controller.App", {

    onInit: function() {
         oModel = new sap.ui.model.json.JSONModel();
         this.setModel(oModel, "myModel");
         oModel.setData(oData);
         console.log(oModel);
    },

    load: function() {
         // if you bind your model to the window-context (this)
         //console.log(this.oModel.getData());
         var myModel = this.getView().getModel("myModel");
         console.log(myModel.getData());
         // I always use ^-this-^ approach.
    }
}); });

为什么我的模型中的数据没有绑定到视图？

1 个答案:

App.view.xml

App.controller.js