javascript - Kineticjs中ajax调用成功后设置id属性

Question

我在 MVC 应用程序中使用 KineticJS。

为了从数据库中检索数据，我对 API Controller 中的 Web 服务进行了一些 ajax 调用。有一个 API 返回一个 id，我想在成功时将其分配给当前的 Kinetic.Group id 属性。

拖放后，会出现一个弹出窗口 PopUpAddRoom(FloorId) 并调用 AddRoom 函数。

我的代码:

function AddRoom(FloorId, RoomName, TypeID) {
    $.ajax({
        beforeSend: function (xhr) { // verify session },
        url: "/api/someurl", //url for adding the room, that returns room's id
        type: "Post",
        dataType: 'json',
        success: function (data) {
            //data is the room id                
            var r = rightLayer.find("#" + data)[0];
            console.log(r.getType()); // here I don't even get the type, I get "Object []"
            var rec = r.find("Rect"); //rec is a rectangle inside the group
            rec.setId(data);
            rightLayer.draw();
        }
    });
}

问题是 r = rightLayer.find("#"+ data)[0]; 为空。它返回未定义。

当我调用 console.log(data); 查看数据内容是否为空时，它返回正确的 id !

我像这样初始化了 id:id: '' 并希望它在从数据库获取数据时进行更改。但这失败了。这段代码有问题吗？

编辑:

在发现 id: '' 确实是个愚蠢的主意(在 markE 的帮助下)之后，我尝试将 id 初始化为一个空变量 ident，该变量从 Web 服务获取其值(这就是当成功添加新实例时增加 id)。

但问题并非来自r = rightLayer.find("#"+ data)[0];。这是将 id 分配给节点(指令的位置)的事实

var ident;
var group = new Kinetic.Group({
    ...
    id: ident
    ...
});

我添加了这一行:ident = data;在ajax调用成功后，仍然是同样的错误。这条指令似乎没有做任何事情。在我调用 PopUpAddRoom 函数后，ident 的值没有改变。

Answer 1

如果将所需节点的 id 初始化为空字符串:

id:''

那么这个.find将永远不会检索到所需的节点:

var r = rightLayer.find("#" + data);

而是做这样的事情:

...

id:'replaceable1'

...

var r = rightLayer.find("#replaceable1")[0];
var rec = r.find("Rect")[0]; 

// change the id of both r and rec
r.setId(data);
rec.setId(data);

请注意，.find 始终返回一个集合(如精美的数组)，因此要获取对该数组中元素的引用，您必须执行 [n]。例如 myLayer.find(something)[0]。