openUI5/SAPUI框架介绍(03)(持续更新)

Last step. we have set up the view and controller. now it is about time to think about the M in MVC.
Base on last step. we will add input field to home page.bind its value to the model (数据绑定）
show the code:

<mvc:View
        controllerName="blog.controller.Main"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true"
        xmlns="sap.m">
    <App>
        <pages>
            <Page title="{i18n>title}" class="sapUiContentPadding">
                <content>
                    <Text text="this is text" />
                    <Button press=".onPressButton"
                            text="this is button"/>

                    <Input
                            value="{/value}"
                            description="{/description}"
                            placeholder="{/placeholder}"
                    />

                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

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

    return Controller.extend("blog.controller.Main", {
        onInit: function(oEvent){
            console.log("init success");
            // 初始化数据
            let oInputData = {
                value       : "this is init value",
                placeholder : "this is placeholder",
                description : "this is description"
            }
            let oInputModel = new JSONModel(oInputData);
            console.log("oInputModel", oInputModel);
            this.getView().setModel(oInputModel);
        },
        onPressButton: function () {
            alert("click event");
        }
    });
});

now that . The binding of the value attribute is a simple binding example that contains only a binding pattern.
we can also combine texts and binding pattern to more complex binding result. To be able to use the so-called complex binding syntax. (相对复杂的)

<mvc:View
        controllerName="blog.controller.Main"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true"
        xmlns="sap.m">
    <App>
        <pages>
            <Page title="{i18n>title}" class="sapUiContentPadding">
                <content>
                    <Text text="this is text" />
                    <Button press=".onPressButton"
                            text="this is button"/>

<!--                    <Input-->
<!--                            value="{/value}"-->
<!--                            description="{/description}"-->
<!--                            placeholder="{/placeholder}"-->
<!--                    />-->
                    <Input
                            value="{/firstValueObject/value}"
                            description="{/firstValueObject/description}"
                            placeholder="{/firstValueObject/placeholder}"
                    />

                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

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

    return Controller.extend("blog.controller.Main", {
        onInit: function(oEvent){
            console.log("init success");
            // 初始化数据
            // let oInputData = {
            //     value       : "this is init value",
            //     placeholder : "this is placeholder",
            //     description : "this is description"
            // }
            // let oInputModel = new JSONModel(oInputData);
            // this.getView().setModel(oInputModel);
            let oInputData = {
                firstValueObject: {
                    value       : "this is init value",
                    placeholder : "this is placeholder",
                    description : "this is description"
                }
            }
            let oInputModel = new JSONModel(oInputData);
            this.getView().setModel(oInputModel);
        },
        onPressButton: function () {
            alert("click event");
        }
    });
});

NOTICE
if you want to use the controls, before this .you need to load the controls in the controller.js, and pass name to callback

OK we have introduced two ways how to bind the data
1: use the JSONModel to init a new object.
2: after that. call the setModel function. and pass the object to setModel function
this.getView() it is a function that we can get the page view(获取视图), you can check the documentation.

OK next step. we will continue~