Question

我在 application.html 文件中有这个：

<head>
    ...
</head>

<body>
    {{> nav2}}
        {{> home}}
    {{> footer}}
</body>

这是我的 nav2.html ：

<template name="nav2">
  ...
  <div id="top_nav_sub_menus"></div>
  ...
</template>

我尝试在我的nav2中加载2个不同的导航项目，定位top_nav_sub_menus元素。一个用于桌面，一个用于移动。

desktop_nav.html

<template name="desktop_nav">
    <li>
      <a href="#" id="benefits">X</a>
      <ul class="menu vertical benefits_children">
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">X</a></li>
      </ul>
    </li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
</template>

mobile_nav.html

<template name="mobile_nav">
    <li><a href="#" id="benefits">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">X</a></li>
</template>

由于我使用detectmobilebrowser.js，我尝试在 application.js 中执行此操作：

if (Meteor.isClient) {
  $(function(){
    if ($.browser.mobile) {
      $("#top_nav_sub_menus").html(Meteor.render(mobile_nav));
    } else {
      $("#top_nav_sub_menus").html(Meteor.render(desktop_nav));      
    }
  })
}

但它没有用。

我尝试过但无法工作：

1 - Blaze.render(mobile_nav, "#top_nav_sub_menus")

2 - 使用jquery-meteor-blaze语法：

if (Meteor.isClient) {

      Template.home.onRendered(function () {
        if($.browser.mobile) {
          $("#top_nav_sub_menus")
            .blaze(template['mobile_nav'])
            .render();
        }
      });

      $(function(){
      ...
      })
    }

我在这里缺少什么？

注意：

这是我目录的树形视图：

├── application.css.scss
├── application.html
├── application.js
├── client
│   ├── javascripts
│   │   ├── detectmobilebrowser.js
│   │   └── jquery-meteor-blaze.js
│   ├── stylesheets
│   │   ├── base.css.scss
│   │   ├── footer.css.scss
│   │   ├── home.css.scss
│   │   ├── nav.css.scss
│   └── views
│       ├── home.html
│       └── layouts
│           ├── desktop_nav.html
│           ├── footer.html
│           ├── mobile_nav.html
│           ├── nav.html
│           └── nav2.html
└── public
    ├── fonts
    │   └── ...
    └── images
        └── ...

Answer 1

尝试使用：

void handle_ajax(){
int startUrlIndex= HTTP_req.indexOf("button");
int endUrlIndex = HTTP_req.indexOf(" HTTP");
String url = HTTP_req.substring(startUrlIndex, endUrlIndex);

int startButtonIndex = url.indexOf("device-") + 7;// 7 is length of device-, I really just want the number.
int endButtonIndex = url.indexOf("&");
String button = url.substring(startButtonIndex, endButtonIndex);

int startStateIndex = url.indexOf("state=") + 6; // 6 is length of state=, I really just want the number.
String state = url.substring(startStateIndex);

int device = button.toInt();
int newState = state.toInt();

dim_light(device, newState * 12);
write_config("", "text");
}

bool write_config(String line, String text){
configFile = SD.open("config.ini", FILE_WRITE);

if(configFile){
    configFile.write("Dipshit");
}
configFile.close();
Serial.println("Works.");
return true;
}

Answer 2

好的，我设法做到了。

我把它放在我的 application.js 文件中：

  Template.nav2.helpers({
    isMobile: function(){
      if ($.browser.mobile){
        return true;
      } else {
        return false;
      }
    }
  });

这是我的 nav2.html 文件中的内容：

{{#if isMobile}}
  {{> mobile_nav}}
{{else}}
  {{> desktop_nav}}
{{/if}}

如何使用jQuery在Meteor中加载partial？

2 个答案: