小编rpa*_*bon的帖子

我有一个已定义的模型和一个集合:

var Box = Backbone.Model.extend({
    defaults: {
        x: 0,
        y: 0,
        w: 1,
        h: 1,
        color: "black"
    }

});

var Boxes = Backbone.Collection.extend({
    model: Box
});

当使用模型填充集合时,我需要一个由Box模型制作的新Boxes集合,这些集合具有完整集合中包含的特定颜色属性,我这样做:

var sorted = boxes.groupBy(function(box) {
    return box.get("color");
});


var red_boxes = _.first(_.values(_.pick(sorted, "red")));

var red_collection = new Boxes;

red_boxes.each(function(box){
    red_collection.add(box);
});

console.log(red_collection);

这有效,但我发现它有点复杂和低效.有没有办法以更简单的方式做同样的事情？

这是我描述的代码:http://jsfiddle.net/HB88W/1/

我正在制作一个应用程序,在画布上绘制不同的矩形,我正在尝试使用Backbone.我有一个名为box的模型:

    Box = Backbone.Model.extend({
        defaults: {
            x: 0,
            y: 0,
            w: 1,
            h: 1,
            color: "#FF9000",
            linewidth: 3,
            id: 0,
        },

        drawBox: function(ctx) {
            ctx.fillStyle = "#FF9000";
            ctx.globalAlpha = 0.1;
            ctx.fillRect(this.get("x"), this.get("y"), this.get("w"), this.get("h")); //transparent box in the back
            ctx.globalAlpha = 1;
            ctx.strokeStyle = this.get("color");
            ctx.lineWidth = this.get("linewidth");
            ctx.strokeRect(this.get("x"), this.get("y"), this.get("w"), this.get("h")); //rectangle on top      
        }
    });

我还有一个这个Box模型的集合:

    BoxSet = Backbone.Collection.extend({
        model: Box          
    });

我想到的是有一个视图,我可以使用Box模型中的drawBox方法将每个Box模型放在画布上的BoxSet集合中,但到目前为止所有的教程和示例都处理简单的文本模板,我无法想象如何完成这个.

关于如何使用Backbone视图完成任何想法？

提前致谢.

我有一个带有一些默认值和url的backbone.js模型:

var Box = Backbone.Model.extend({
    url: "./save.php",
    defaults: {
        x: 0,
        y: 0,
        w: 1,
        h: 1
    }
});

然后我有一个这个模型的实例,我继续保存它:

var box = new Box({ x:10, y:10, w:200, h:200 });
box.save();

现在我想使用PHP脚本"save.php"将此模型保存到MySQL数据库中,它是这样的:

<?php 
    include('connection.php');

    $id = $_POST['cid'];
    $x = $_POST['x'];
    $y = $_POST['y'];
    $w = $_POST['w'];
    $h = $_POST['h'];

    mysql_query("INSERT INTO boxes (id, x, y, w, h)
                         VALUES('$id', '$x', '$y', '$w', '$h')
                       ") or die(mysql_error());
?>
echo "Data Inserted!";

我尝试过阅读很多教程,但是我无法将这个简单的模型保存到工作中.为什么我的代码不起作用？关于如何解决这个问题的任何想法？

谢谢

编辑:快速解决方案

在php脚本中,从发送的JSON对象获取信息的正确方法如下:

$box_data = json_decode(file_get_contents('php://input'));
$x = $box_data->{'x'};
$y …

我正在使用具有以下布局的单页面应用程序:

我使用Backbone.js路由器来管理在屏幕上加载的元素:

var AppRouter = Backbone.Router.extend({
    routes: {
        ""              : "list",
        "content1"      : "content1",
        "content1/cont3": "cont3"
    },

    list: function() {
        var list = new List().render().$el; //view
        $("#List").html(list);
    },

    content1: function(){
        var cont1 = new Content1().render().$el; //view
        $("#Content1").html(cont1);
    },

    content3: function(){
        var cont3 = new Content3().render().$el; //view
        $("#Cont3").html(cont3);
    }        

});

每次我点击#List中的列表项时,都会生成#Content1,当我在#Content1上的块上执行时,会出现#Cont3.

我面临的问题是,如果由于某种原因,我在地址为localhost/content1时刷新页面,例如; #List中的元素消失了.

我希望#List中的内容在加载时始终存在,独立于url可能是什么,以及#Content1中的内容.有没有办法使用骨干路由器实现这一目标？

谢谢

我正在研究嵌套的主干视图,如果单击它,它将创建同一视图的新实例.我想只禁用特定事件,而不是所有事件; 在这种情况下,点击.我尝试使用undelegateEvents(),但这将禁用所有功能.关于如何做到这一点的任何想法？

这是我正在处理的一段代码:

var View = Backbone.View.extend({
    events: {
        "mousedown": "start",
        "mouseup": "over"
    },

    start: function() {
        var model = this.model;

        var v = new View({
            model: model,
        });
        v.undelegateEvents(); //I just want to disable mousedown
        v.render();
    },

    over: function() {
        /*
        some code here
        */
    },

    render: function() {
        /*
        some code here
        */
    }
});

这个想法是禁止在保留其他事件的同时点击第二个实例化视图.第一个将有它的所有事件.

谢谢

我有一个 Javascript 对象数组：

var List = [
            {
                employee:'Joe',
                type:'holiday',
            },
            {
                employee:'Jerry',
                type:'seminar',

            },
            {
                employee:'Joe',
                type:'shore leave',
            }
           ];

我想获得两个新的对象数组；一个用于关键员工“Joe”，另一个用于关键员工“Jerry”。对象应保留相同的键/值对。

我一直在尝试使用 underscore.js 找到解决方案，但它变得太复杂了。关于如何实现这一目标有什么想法吗？

我宣布了一个按钮:

<button id="create" type="button">add div</button>

每次我使用jQuery UI对话框单击按钮时,我想在文档正文中添加一个新的div元素,如下所示:

var form = $("<div>", {id:"form"});

    form.append(
        $("<input>")
            .attr({
                "type" : "text",
                "id" : "user-input"
            })
    )
    .dialog({
        width: 600,
        buttons: {
            "Ok": function() {
                var new_div = $("<div>").html($("#user-input").val()).addClass("destiny_div");
                new_div.appendTo($("body"));
                $(this).dialog("close");
            }}
    });

我第一次点击按钮它工作正常,但第二次,我写入输入文本框的文本没有使用新值更新,而是采用第一个放置的值.

例如,如果我第一次输入"hello"并单击"ok"按钮,则会在主体中添加一个新的div,其中包含文本"hello",但是当我第二次执行此操作时,现在键入"再见",将添加一个新的div,但文本中包含"hello",而不是"再见".

这是我的代码:http://jsfiddle.net/vWQ9T/

关于它为何如此工作的任何想法？谢谢