码迷,mamicode.com
首页 > 其他好文 > 详细

小程序如何实现数据与逻辑分离

时间:2017-10-15 10:58:23      阅读:955      评论:0      收藏:0      [点我收藏+]

标签:content   sts   stl   页面   混合   tab   设置   cti   nbsp   

  看过前面的文章的童鞋都知道,前端开发使用的是假数据去渲染页面,从而实现前后端分离。在小程序中,我们的数据与JS脚本混合在一起,意味着我们的逻辑和数据代码都混在一起了,这是非常不好的,实现数据与逻辑分离是非常有必要

  下面,来看看小程序如何实现数据与逻辑分离:

1.新建一个JS脚本,把在原来JS脚本混合一起的数据截切到新建的脚本

  

var local_database = [
{
date: ‘OCT 12 2016‘,
title: ‘葉秋月‘,
imgSrc: ‘/image/post/crab.png‘,
avatar: ‘/image/avatar/1.png‘,
img_condition: true,
content: ‘《你的名字。》是由新海诚执导,由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影‘,
reading: ‘9999‘,
collection: ‘9999‘
},
]
 
2.把这些数据(module)暴露出去(类似nodejs)
module.export={
  postList:local_database;
}
3.在需要用数据的JS脚本中require module;
var postsData=require(‘../../data/posts-data.js‘);
 
4.设置数据
this.setData({
//使用postData中的数据
postList: postsData.postList
});
此时在wxml中postList就是数组的名称了,使用for语句即可使用数组数据。
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="index">

小程序如何实现数据与逻辑分离

标签:content   sts   stl   页面   混合   tab   设置   cti   nbsp   

原文地址:http://www.cnblogs.com/ge1in/p/7669110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!