Question

在cshtmlpage中我有这个元素：

<g transform="translate(@x @y)" width="@(r * 2)" height="@(r * 2)" onclick="Topology.GroupDiagramPage.click()">
<circle r="@r" class="diagram-node" />

    @if(node.NodeStatus != NodeStatus.None)
    {
        bool isPaly = node.NodeStatus == NodeStatus.Running;
        string playVisibslityClass = isPaly ? "" : "not-visibility";
        string stopVisibslityClass = !isPaly ? "" : "not-visibility"; 

<rect id="@("topology-diagram-" + node.Id + "-status-stop")" width="16" height="16" fill="#CA3D3C" x="-8" y="-8" class="@stopVisibslityClass"/>
<polygon id="@("topology-diagram-" + node.Id + "-status-play")"  points="-5, -10 10, 0 -5, 10" fill="#009A22" class="@playVisibslityClass"/>
    }
</g>

骨干脚本中的这个元素

var Topology = this.MyProject.Views.Topology;

Topology.GroupDiagramPage = Backbone.View.extend({

    tagName: "div",

    className: "topology-group-diagram-page",

    initialize: function () {
        var _groupid = 0;
        var _links = 0;
        var _sendports = 0;
        var _orchestrations = 0;
        var _receiveports = 0;
        $.ajax({
            async: false,
            dataType: "json",
            url: "/api/Diagram/" + this.model.get("id"),
            success: function (data) {
                _groupid = data.GroupId;
                _sendports = data.SendPorts;
                _orchestrations = data.Orchestrations;
                _receiveports = data.ReceivePorts;
                _links = data.Links;
            }
        });
        this.groupid = _groupid;
        this.nodelinks = _links;
        this.sendports = _sendports;
        this.orchestrations = _orchestrations;
        this.receiveports = _receiveports;
    },

    render: function () {
        this.diagram();
        return this;
    },

    text: function (svg, text, x, y) {
        svg.text(x, y, text, { class: "diagram-text" });
    },

    node: function (svg, node, x, y, r) {
        var g = svg.group({ transform: "translate(" + x + ', ' + y + ')', width: r * 2, height: r * 2 });
        svg.circle(g, 0, 0, r, { class: "diagram-node" });
        if (node.NodeStatus != 0) {
            var isPaly = node.NodeStatus == 83;
            var playVisibslityClass = isPaly ? "" : "not-visibility";
            var stopVisibslityClass = !isPaly ? "" : "not-visibility";
            svg.rect(g, -8, -8, 16, 16, { id: "topology-diagram-" + node.Id + "-status-stop", fill: "#CA3D3C", class: stopVisibslityClass });
            svg.polygon(g, [[-5, -10], [10, 0], [-5, 10]], { id: "topology-diagram-" + node.Id + "-status-play", fill: "#009A22", class: playVisibslityClass });
        }
        this.text(svg, node.Name, x - 40, y + 50);
    },

    nodes: function (svg, nodes, x, ndy, height) {
        var j = ndy + height / 2;
        for (var i = 0; i < nodes.length; i++) {
            this.node(svg, nodes[i], x, j, height / 2);
            j += ndy + height;
        }
    },

    link: function (svg, x1, y1, x2, y2) {
        svg.line(x1, y1, x2, y2, { class: "diagram-link" });
    },

    links: function (svg, fromNodes, toNodes, links, usedLinks, fdy, tdy, height, x1, x2) {
        var i = fdy + height / 2;
        var j = tdy + height / 2;
        var Contains = function (links, link) {
            links.forEach(function (elem) {
                if (elem == link)
                    return true;
            });
            return false;
        };
        for (var i = 0; i < fromNodes.length; i++) {
            j = tdy + height / 2;
            for (var j = 0; j < toNodes.length; j++) {
                var link = { FromNodeId: fromNodes[i].Id, ToNodeId: toNodes[j].Id };
                if (Contains(links, link) && !Contains(usedLinks, link)) {
                    this.link(svg, x1, i, x2, j);
                    usedLinks.push(link);
                }
                j += tdy + height;
            }
            i += fdy + height;
        }
    },

    diagram: function () {
        var allWidth = 840;
        var cWidth = allWidth / 3;
        var dy = 50;
        var nd = 50;
        var rx = cWidth / 2;
        var ox = cWidth + rx;
        var sx = rx + 2 * cWidth;

        var rCount = this.receiveports.length;
        var oCount = this.orchestrations.length;
        var sCount = this.sendports.length;

        var maxCount = Math.max(Math.max(rCount, sCount), oCount);
        var allHeight = (nd + dy) * maxCount + dy;

        var rdy = (allHeight - nd * rCount) / (rCount + 1);
        var ody = (allHeight - nd * oCount) / (oCount + 1);
        var sdy = (allHeight - nd * sCount) / (sCount + 1);

        var usedLinks = new Array();
        var links = this.nodelinks;

        this.$el.svg({ id: this.groupid, class: "topology-diagram", style: "width: " + allWidth + "; height: " + allHeight });
        var svg = this.$el.svg('get');
        this.text(svg, "Receive ports", 90, 15);
        this.text(svg, "Orchestrations", 370, 15);
        this.text(svg, "Send ports", 650, 15);
        svg.line(280, 0, 280, allHeight, { class: "diagram-line" });
        svg.line(560, 0, 560, allHeight, { class: "diagram-line" });
        this.links(svg, this.orchestrations, this.sendports, links, usedLinks, ody, sdy, nd, ox, sx);
        this.links(svg, this.receiveports, this.orchestrations, links, usedLinks, rdy, ody, nd, rx, ox);
        this.links(svg, this.receiveports, this.sendports, links, usedLinks, rdy, sdy, nd, rx, sx);
        this.links(svg, this.orchestrations, this.orchestrations, links, usedLinks, ody, ody, nd, ox, ox);
        this.nodes(svg, this.receiveports, rx, rdy, nd);
        this.nodes(svg, this.orchestrations, ox, ody, nd);
        this.nodes(svg, this.sendports, sx, sdy, nd);
    },

    click: function () {
        colsole.log("Clic!");
    }
});

我需要在脚本中单击调用者“click（）”。
如果我攻击“”elemenet这个事件：onclick =“Topology.GroupDiagramPage.click（）” 我明白了：未捕获的ReferenceError：未定义拓扑

我能做什么＆amp;

Answer 1

我从您的代码和问题中了解到，如果您希望在某些操作上执行视图的任何方法，则需要使用Backbone View的事件哈希。

考虑行，

this.$el.svg({ id: this.groupid, class: "topology-diagram", style: "width: " + allWidth + "; height: " + allHeight });

diagram()方法的

将div添加到id属性为div_id的DOM中，如果要执行点击，可以写这样的内容在view

中

// this event binding will execute click method whenever you click on a div 
// whose id is 'div_id'
events : {
  "click #div_id" : "click" 
}

这不是你问题的解决方案，而是实现你想要实现的目标的一种方式，希望它有所帮助。

来自cshtml页面的骨干功能事件

1 个答案: