DOM操作取后台json问题


http://runjs.cn/detail/n5vshadv

代码就是上面的链接 = =很多是多余的,下面我就简单的叙述一下问题

html是swig模板渲染,类似django的那个

我的功能就是渲染这个模板的时候向后台取数据,后台的数据就是以json的形式来传送的

我要做的就是get后台传送的数据然后输出到页面上,json的格式和id或者是name是有对应的,简单的对应关系如下:
json: name 前台:name
json:a.name 前台:a_name

所以说,就像我写的一样,如果是要给#contct_email填充数据的话代码就是 $('#contact_email').val(data.result.contact.email);
同样,如果是给a填充数据的话代码应该就是 $('#a').val(data.result.a);

那么问题就来了,我总不能一个一个的写吧,虽然也是可以 = =那么有什么方法可以简单一下吗,不用写那么多的重复代码

get_json上面的代码是别人给我的,可以忽略,也可以参考,主要就是实现了option里面向后台取数据然后填充在相应的option里面,后台也是Json的格式。.与_的转化实在后台实现的,代码是这样的:


 coffeescript


 .put '/user/:id', (req, res) ->
        # Tips: 身份证号、密码不能修改
        id = req.params.id
        data = req.body
        doc = {}
        return res.sendStatus 400 if not _.validate rules.objectID, id
        return res.sendStatus 403 if req.session.userInfo?._id isnt id and req.session.role isnt 'super'
        {total,invalidate} = userInfoAndRule.reduce ((x,y) ->
            [field,rule] = y
            if field.replace(/\./g, '_') of data
                x.total += 1
                if _.validate rule, data[field]
                    doc[field] = data[field]
                else
                    x.invalidate += 1
            x
        ), total:0,invalidate:0
        res.sendStatus 400 if invalidate or not total
        db.updateUserInfo id, doc, (err, succeeded) ->
            if err
                console.warn err
                return res.sendStatus 500
            if not succeeded
                return res.sendStatus 404
            #TODO: 更新一下session中的信息
            res.sendStatus 200

我就是想偷个懒,求大神解释

json node.js jquery插件 JavaScript coffeescript

渤海湾的老伯伯 9 years, 9 months ago

 function getValue (id, data) {
    var i = id.indexOf('_');
    if(i < 0) return data && data[id];

    var prop = id.slice(0, i);
    return prop && getValue(id.slice(i + 1), data[prop]);
}

var data = { 
    result: {
        contct: {
            name: "example",
            email: "[email protected]"
        },
        a: "I'm a"
    }
}
console.log(getValue('contct_email', data.result));
console.log(getValue('a', data.result));

不知道这个是否满足你的需求,你的get_json可以这样写


 function get_json() {
    $.getJSON('/user/me',
        function(data) {
            var id = 'contact_email';
            $('#' + id).val(getValue(id, data.result));
        });
}

GGRR297 answered 9 years, 9 months ago

既然是模版肯定不是一个一个填充;
通常模版都会有render函数的,可参考 官方文档
页面渲染有后台渲染和前端渲染,你通过ajax获取数据然后渲染页面属于前端渲染;

没用过swig,参考文档写了个小例子,仅供参考:
图片描述

disco answered 9 years, 9 months ago

楼主帖的 runjs 上面的代码, 那块HTML很明显是个模板, 既然是模板, 那就肯定不是让你去用


 $('#contact_email').val(data.result.contact.email);

这样的代码赋值, 否则还叫什么模板,

你的模板中已经有对各元素设置值的功能,只是你没有将它应用上去而已(不过话说 swig 官方不是推荐在后端去渲染模板吗?虽然也可以前端来做).

因为你没有提供你后端返回的具体数据,而只是简单描述了一下(而且描述的内容不完整),根据你的描述,写了下面这个Demo你可以体会一下, 它的用法:

http://jsfiddle.net/xqin/z2yvzxoe/

如果不会用, 欢迎继续提问(提问的时候记得把你后端返回的数据样本提供一下).

reimuly answered 9 years, 9 months ago

Your Answer