• Meteor Blaze


    Blaze是Meteor 软件包用于构建现场反应模板。
    Render方法

    这种方法被用于绘制模板到DOM。首先,我们将创建 myNewTemplate 之后渲染。 我们增加 myContainer 这将用来作为父元素的容器,所以render方法知道在何处呈现我们的模板。

    meteorApp/client/app.html

    <head>
       <title>meteorApp</title>
    </head>
     
    <body>
       <div id = "myContainer">
       </div>
    </body>
    
    <template name = "myNewTemplate">
       <p>Text from my new template...</p>
    </template> 

    下一步,我们将创建渲染功能这将需要两个参数。第一个是将要渲染的模板,第二个是,我们上面提到的父元素。

     

    meteorApp/client/app.js

    Meteor.startup(function () {
       if(Meteor.isClient) {
          var myNewTemplate = Template.myNewTemplate;
          var myContainer = document.getElementById('myContainer');
          Blaze.render(myNewTemplate, myContainer);
       }
    });
    

    渲染数据

    如果需要被动地传递一些数据,你可以使用 renderWithData 方法。 HTML和前面的例子完全相同。

     

    meteorApp/client/app.html

    <head>
       <title>meteorApp</title>
    </head>
     
    <body>
       <div id = "myContainer">
       </div>
    </body>
    
    <template name = "myNewTemplate">
       <p>Text from my new template...</p>
    </template> 

    我们可以在Meteor.renderWithData方法的第二个参数添加数据。其它两个参数和之前的实例相同,在这个例子中我们的数据将用于记录一些文本的功能。

     

    meteorApp/client/app.js

    Meteor.startup(function () {
    
       if(Meteor.isClient) {
          var myNewTemplate = Template.myNewTemplate;
    		
          var myData = function() {
             console.log('Log from the data object...')
          }
    		
          var myContainer = document.getElementById('myContainer');
          Blaze.renderWithData(myNewTemplate, myData, myContainer);
       }
    	
    });
    

    删除方法

    我们可以添加 remove

    meteorApp/client/app.html

    <head>
       <title>meteorApp</title>
    </head>
     
    <body>
       <div id = "myContainer">
       </div>
    </body>
    
    <template name = "myNewTemplate">
       <p>Text from my new template...</p>
    </template> 

    在这个例子中,我们将在三秒钟后移除模板。请注意,我们使用 Blaze.Remove方法 除去模板。

    meteorApp/client/app.js

    Meteor.startup(function () {
       if(Meteor.isClient) {
          var myNewTemplate = Template.myNewTemplate;
          var myContainer = document.getElementById('myContainer');
          var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);
    
          Meteor.setTimeout(function() {
             Blaze.remove(myRenderedTemplate);}, 3000);
       }
    });
    
    下表显示了可使用的其他方法。
    S.No.
    方法与细则
    1

    Blaze.getData([elementOrView])

    用于从渲染元素检索数据。
    2

    Blaze.toHTML(templateOrView)

    用于渲染模板或视图字符串。
    3

    Blaze.toHTMLWithData(templateOrView, data)

    用于渲染模板或视图字符串附加数据。
    4

    new Blaze.View([name], renderFunction)

    用于创建新 Blaze 反应性的DOM部分。 

    5

    Blaze.currentView

    用于获取当前视图。
    6

    Blaze.getView([element])

    用于获取当前视图。
    7

    Blaze.With(data, contentFunc)

    用于构造呈现一些内容与上下文的视图。
    8

    Blaze.If(conditionFunc, contentFunc, [elseFunc])

    用于构造呈现一些有条件的内容的视图。
    9

    Blaze.Unless(conditionFunc, contentFunc, [elseFunc])

    用于构造呈现一些有条件的内容(反转Blaze.if)的视图。
    10

    Blaze.Each(argFunc, contentFunc, [elseFunc])

    用于构建为每个项目呈现 contentFunct 的视图。

    11

    new Blaze.Template([viewName], renderFunction)

    使用名称和内容构建新的Blaze视图。
    12

    Blaze.isTemplate(value)

    如果值是一个模板对象则返回true。
  • 相关阅读:
    【阅读SpringMVC源码】手把手带你debug验证SpringMVC执行流程
    ❀ Spring5学习大总结
    在 Linux 上有哪些运行程序的方式?
    C语言使用宏输出调试信息实战
    vector、map 判断某元素是否存在、查找指定元素
    C语言宏定义中#、##、#@符号的使用
    语言宏的定义和宏的使用方法(#define)
    C宏定义的简单总结
    C语言宏#define中#,##,#@和\的用法
    开源项目
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7389980.html
Copyright © 2020-2023  润新知