关联对象在微信小程序如何用点语法链接访问得到渲染

laeser 2017-02-15 06:00:59 UTC #3

一个项目做完了，还没有实现wxml中mustache链式访问，于是又来追问。

在微信小程序的js文件中，是可以使用点语法链式访问，而现在的问题是在wxml文件中，不能使用mustache{{cart.goods.title/price}}语法读取。

比如对购买车cartObjects遍历一次，goodsObjects.push(cartObjects[i].get('goods'))，将使用that.setData({})将，goodsObjects存起来，再由wxml中{{}}渲染。

同理，列出用户所有订单也需如何，旦凡涉及从表的，都需如此，显得有点多余。有什么方法能够避免在js中的主表遍历，谢谢。

leeyeh 2017-02-15 06:54:05 UTC #4

计划中 SDK v3.0 的一个重要更新就是支持 .toJSON() 的时候将 Pointer 的内容也输出，这样就可以直接在 wxml 中访问属性了。

你可以通过这个 issue 来追踪进度： https://github.com/leancloud/javascript-sdk/issues/383

laeser 2017-02-15 11:52:38 UTC #5

也曾试过toJSON，原来如此，谢谢。一定关注，期待。。。

laeser 2017-02-20 06:44:56 UTC #6

换上新的av-weapp-min.js

读了最新的issue

或

https://github.com/leancloud/javascript-sdk/blob/dist/dist/av-weapp.min.js

写法改造

现在的写法如下：

diff --git a/pages/index/index.js b/pages/index/index.js
index 986fd28..039ba88 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -35,14 +35,11 @@ Page({
 		// 排序按照创建日期
 		query.find().then(function (courseObjects) {
 			// 同时要设定cover封面
-			var cover = [];
-			for (var i = 0; i < courseObjects.length; i++) {
-				cover.push(courseObjects[i].get('cover'));
-				// console.log(courseObjects[i].toFullJSON());
-			}
+			var newCourse = courseObjects.map(function (course) {
+				return course._toFullJSON();
+			});
 			that.setData({
-				cover: cover,
-				newCourse: courseObjects
+				newCourse: newCourse
 			});
 		});
 	},

数据结构

Course对象包括一个File类型的Cover

好处

较之前的写法，简洁优雅了一些，不用cover单独遍历存储，这对于Course包含有多个Pointer对象时，确实要方便太多了。

问题

能不能做到再贪心一点，将_toFullJSON()这趟遍历是不是省去了，在wxml文件中直接使用{{item.cover.url}}？是要等到ver 3.0才能实现将这一次遍历也省掉？

非常感谢

leeyeh 2017-02-20 06:56:24 UTC #7

是要等到ver 3.0才能实现将这一次遍历也省掉？

Yes

小白鼠饲料： https://dn-ja962eyx.qbox.me/12d43148e21e6a722731.js

laeser 2017-02-20 07:22:25 UTC #8

用上新发来的狗粮

GridView中的缩略图并没有读出来，Swiper用的是toFullJSON读出来了。

	loadBanner: function () {
		// 读取海报轮播
		var query = new AV.Query('Course');
		query.equalTo('isBanner', true);
		query.find().then(function (courseObjects) {
			that.setData({
				bannerCourse: util.toFullJSON(courseObjects)
			});
		});
	},
	loadMaincourse: function () {
		// 读取最新上线
		var that = this;
		var query = new AV.Query('Course');
		query.descending('createdAt');
		// 排序按照创建日期
		query.find().then(function (courseObjects) {
			that.setData({
				newCourse: courseObjects
			});
		});
	},

相应的wxml文件代码

<swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="1000" style="height:{{bannerHeight}}px;">
    <swiper-item wx:for="{{bannerCourse}}" wx:key="">
      <image src="{{item.cover.url}}" mode="aspectFill" class="swiper-image" bindtap="showDetail" data-object-id="{{item.objectId}}" />
    </swiper-item>
</swiper>
<!-- new arrival course -->
<view class="container-course">
	<text class="caption">最新上线</text>
	<view class="main-course">
		<view class="single-course" wx:for="{{newCourse}}" wx:key="" bindtap="showDetail" data-index="{{index}}">
			<image class="avatar" src="{{item.cover.url}}" mode="aspectFill" />
			<text class="title">{{item.name}}</text>
			<view class="summary">
				<text class="price">{{item.minutes}}分钟</text>
				<text class="sale">{{item.volume}}人看过</text>
			</view>
		</view>
	</view>
</view>

leeyeh 2017-02-20 07:50:06 UTC #9

query.include('cover').find()？

laeser 2017-02-20 08:31:16 UTC #10

也是一样，没能读到图

		// 读取最新上线
		var query = new AV.Query('Course');
		query.include('cover');
		query.find().then(function (courseObjects) {
	        that.setData({
			newCourse: courseObjects
		});
	    });

	<view class="main-course">
		<view class="single-course" wx:for="{{newCourse}}" wx:key="" bindtap="showDetail" data-index="{{index}}">
			<image class="avatar" src="{{item.cover.url}}" mode="aspectFill" />
			<text class="title">{{item.name}}</text>
			<view class="summary">
				<text class="price">{{item.minutes}}分钟</text>
				<text class="sale">{{item.volume}}人看过</text>
			</view>
		</view>
	</view>

我的使用经验是，对于_FILE系统对象，query时不带include也是能正常使用；而自定义的Class比如Cart/Goods需include。

leeyeh 2017-02-20 08:34:01 UTC #11

看起来是漏了 File 类型，我测试一下。

laeser 2017-02-20 08:34:51 UTC #12

是这样，我那我试下自定义Class，看用起来是怎样的

laeser 2017-02-20 09:05:33 UTC #13

Chapter组合于Course，结果好用，赞一个～

    	var that = this
    	var query = new AV.Query('Chapter');
        query.include('course');
        query.equalTo('course', AV.Object.createWithoutData('Course', objectId));
        // 生成商品对象
        query.find().then(function (chapterObjects) {
        	// console.log(chapterObjects);
        	that.setData({
        		chapterObjects: chapterObjects
        	});
            // console.log(chapterObjects.length);
		}, function (error) {
		// 异常处理
		});

<text wx:for="{{chapterObjects}}" wx:key="">
	{{item.title}}->{{item.course.name}}
</text>

那么接下来就用着开发版，发现bug会及时反馈出来

请问v3.0 计划几时能正式上线呢？

laeser 2017-02-21 13:59:05 UTC #14

请问上面这个开发版对_FILE对象的bug有新的版本了吗？

https://dn-ja962eyx.qbox.me/12d43148e21e6a722731.js

有的话，我想拿来用上。

3ks

leeyeh 2017-02-21 14:34:21 UTC #15

已经解决了明天给你新版

laeser 2017-02-22 00:55:45 UTC #16

leeyeh 2017-02-22 03:05:28 UTC #17

http://ac-ryautyuj.clouddn.com/c4256f6cf8bff9941583.js

laeser 2017-02-22 03:35:14 UTC #18

谢啦。😀😀😀😀😀

laeser 2017-02-22 03:47:27 UTC #19

谢谢

发自网易邮箱大师在2017年02月22日 11:15，leeyeh 写道：

leeyeh
February 22

http://ac-ryautyuj.clouddn.com/c4256f6cf8bff9941583.js

通过邮件回复或者在浏览器中访问 https://forum.leancloud.cn/t/topic/11833/17 。

之前的回复
laeser
February 22

leeyeh

February 21

已经解决了明天给你新版

laeser

February 21

请问上面这个开发版对_FILE对象的bug有新的版本了吗？

https://dn-ja962eyx.qbox.me/12d43148e21e6a722731.js

有的话，我想拿来用上。

3ks

laeser

February 20

Chapter组合于Course，结果好用，赞一个～
    	var that = this
    	var query = new AV.Query('Chapter');
        query.include('course');
        query.equalTo('course', AV.Object.createWithoutData('Course', objectId));
        // 生成商品对象
        query.find().then(function (chapterObjects) {
        	// console.log(chapterObjects);
        	that.setData({
        		chapterObjects: chapterObjects
        	});
            // console.log(chapterObjects.length);
		}, function (error) {
		// 异常处理
		});
<text wx:for="{{chapterObjects}}" wx:key="">
	{{item.title}}->{{item.course.name}}
</text>
那么接下来就用着开发版，发现bug会及时反馈出来

请问v3.0 计划几时能正式上线呢？

laeser

February 20

是这样，我那我试下自定义Class，看用起来是怎样的

通过邮件回复或者在浏览器中访问 https://forum.leancloud.cn/t/topic/11833/17 。

如果你希望取消这些邮件的订阅，请访问你的用户设置。

laeser 2017-03-07 13:09:47 UTC #20

为何在vue中使用一定要通过遍历+toJSON()才能取到属性，而小程序中可以直接通过点语法？

	<div id="app" class="container-course">
		<div v-for="item in newCourse">
			A:{{item.name}}
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				newCourse: []
			}
		});
		

		loadNewCourse(function (courseObjects) {
			var newObjects = courseObjects.map(function (object) {
				return object.toJSON();
			});
			app.newCourse = newObjects;		
               });
	</script>

如果不想遍历，按照二楼的子类定义getter或setter也可以

// 定义子类属性
		var Course = AV.Object.extend('Course'); 
		Object.defineProperty(Course.prototype, 
			'name', 
			{ 
				get: function(){ return this.get('name'); }, 
				set: function(value) { this.set('name', value); } 
			}
		);

但始终不像小程序那么直接。

我用的是js sdk，v3.0.0 beta1版本

谢谢

leeyeh 2017-03-07 14:38:12 UTC #21

因为在 vue 中，对 data 中属性变化的监听是通过 Object.defineProperty 来完成的，所以 vue 要求 data 中的数据必须是 plain object。因此在 vue 中推荐的用法是使用 toJSON() 得到 plain object 之后设置为 data。

小程序中对数据的更新是通过 setData 方法主动通知的，所以没有 plain object 的限制，而在小程序中由于 js 与 wxml 是在两个不同的 runtime 中运行的，所以小程序会自动的将 data 中的 AV.Object toJSON 之后交给模板层渲染，所以其实也算是需要 toJSON 的，只是内部做了。

值得一提的是，在 Angular 中，数据的更新是靠脏值检查，所以在 Angular 中是真正可以在模板中直接「消费」AV.Object 的。

laeser 2017-03-08 02:53:09 UTC #22

感谢如何全面细致的科普，收获很大，慢慢消化它们。

采用 Discourse，启用 JavaScript 以获得最佳效果