1
Dans cshtmlpage j'ai cet élément:pour la fonction épine dorsale de page cshtml
<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>
Et cet élément dans le script fédérateur
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!");
}
});
je dois cliquer sur l'appelant « clic() » dans le script.
Si j'attaque "" elemenet cet événement: onclick = "Topology.GroupDiagramPage.click()" Je reçois ceci: Uncaught ReferenceError: Topologie n'est pas définie
Que puis-je faire &