event for backbone function from cshtml page - events

Question

In cshtmlpage i have this element:
<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>
And this element in backbone script
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!");
}
});
I need to click on the caller "click ()" in the script.
If I attack to "" elemenet this event: onclick="Topology.GroupDiagramPage.click()"
I get this:
Uncaught ReferenceError: Topology is not defined
What can I do this&

Answer 1

What I understand from you code and question is, if you want any method of the view to be executed on some action, you need to use the events hash of the Backbone View.
Considering line,
this.$el.svg({ id: this.groupid, class: "topology-diagram", style: "width: " + allWidth + "; height: " + allHeight });
of the diagram() method adds a div to the DOM whose id attribute is div_id and if you want to execute click on that, you can write something like this in the view
// this event binding will execute click method whenever you click on a div
// whose id is 'div_id'
events : {
"click #div_id" : "click"
}
This is not a solution of your question, but a way to achieve what you want to achieve, hope it helps.